diff --git a/src/app/admin/accounts/reports/client.tsx b/src/app/admin/accounts/reports/client.tsx
index a6b4fdc..34930d4 100644
--- a/src/app/admin/accounts/reports/client.tsx
+++ b/src/app/admin/accounts/reports/client.tsx
@@ -14,9 +14,13 @@ interface ReportData {
 
 export default function ReportsPageClient({ data }: { data: ReportData }) {
   const searchParams = useSearchParams();
-  const [tab, setTab] = useState(searchParams.get('tab') ?? 'monthly-profit');
+  const [tab, setTab] = useState(searchParams.get('tab') ?? 'kpi');
   const [fromDate, setFromDate] = useState('');
   const [toDate, setToDate] = useState('');
+  const [expenseCategoryFilter, setExpenseCategoryFilter] = useState('');
+  const [drillDownMonth, setDrillDownMonth] = useState<string | null>(null);
+  const [sortBy, setSortBy] = useState<{ field: string; order: 'asc' | 'desc' }>({ field: 'date', order: 'desc' });
+  const [exportFormat, setExportFormat] = useState<'all' | 'income' | 'expenses' | 'tax-year'>('all');
 
   // Ensure dates are parsed as Date objects (they might be strings from server)
   const normalizedData = {
@@ -39,6 +43,17 @@ export default function ReportsPageClient({ data }: { data: ReportData }) {
     })),
   };
 
+  // Calculate YTD (current calendar year)
+  const now = new Date();
+  const ytdStart = new Date(now.getFullYear(), 0, 1);
+
+  // Calculate UK tax year (April-April)
+  const getCurrentTaxYear = () => {
+    const apr = new Date(now.getFullYear(), 3, 6);
+    if (now < apr) return new Date(now.getFullYear() - 1, 3, 6);
+    return apr;
+  };
+
   const monthlyProfit = useMemo(() => {
     const months = new Map<string, { revenue: number; expenses: number }>();
 
@@ -68,6 +83,36 @@ export default function ReportsPageClient({ data }: { data: ReportData }) {
       }));
   }, [normalizedData]);
 
+  // Growth metrics
+  const growthMetrics = useMemo(() => {
+    if (monthlyProfit.length < 2) return { momGrowth: 0, marginTrend: [] };
+
+    const lastMonth = monthlyProfit[0].profit;
+    const prevMonth = monthlyProfit[1].profit;
+    const momGrowth = prevMonth !== 0 ? ((lastMonth - prevMonth) / Math.abs(prevMonth)) * 100 : 0;
+
+    const marginTrend = monthlyProfit.map(m => ({
+      month: m.month,
+      margin: m.revenue > 0 ? (m.profit / m.revenue) * 100 : 0,
+    }));
+
+    return { momGrowth, marginTrend };
+  }, [monthlyProfit]);
+
+  // Income breakdown
+  const incomeBreakdown = useMemo(() => {
+    const webSales = normalizedData.orders.reduce((sum, o) => sum + o.total, 0);
+    const manualSales = normalizedData.manualSales.reduce((sum, s) => sum + s.total, 0);
+    const total = webSales + manualSales;
+    return {
+      webSales,
+      manualSales,
+      total,
+      webPercent: total > 0 ? (webSales / total) * 100 : 0,
+      manualPercent: total > 0 ? (manualSales / total) * 100 : 0,
+    };
+  }, [normalizedData]);
+
   const expenseBreakdown = useMemo(() => {
     const byCategory = new Map<string, number>();
     normalizedData.expenses.forEach((exp) => {
@@ -78,180 +123,349 @@ export default function ReportsPageClient({ data }: { data: ReportData }) {
       .map(([category, total]) => ({ category, total }));
   }, [normalizedData]);
 
-  const cashFlow = useMemo(() => {
-    const flow = new Map<string, { in: number; out: number }>();
-
-    [...normalizedData.orders, ...normalizedData.manualSales].forEach((sale: any) => {
-      const date = new Date(sale.soldAt || sale.createdAt);
-      const key = date.toISOString().slice(0, 7);
-      if (!flow.has(key)) flow.set(key, { in: 0, out: 0 });
-      flow.get(key)!.in += sale.total;
-    });
-
-    normalizedData.expenses.forEach((exp) => {
-      const date = new Date(exp.date);
-      const key = date.toISOString().slice(0, 7);
-      if (!flow.has(key)) flow.set(key, { in: 0, out: 0 });
-      flow.get(key)!.out += exp.amount;
-    });
-
-    let cumIn = 0,
-      cumOut = 0;
-    return Array.from(flow.entries())
-      .sort((a, b) => a[0].localeCompare(b[0]))
-      .map(([month, { in: inFlow, out: outFlow }]) => {
-        cumIn += inFlow;
-        cumOut += outFlow;
-        return { month, in: inFlow, out: outFlow, cumNet: cumIn - cumOut };
-      });
+  const expenseCategories = useMemo(() => {
+    return [...new Set(normalizedData.expenses.map(e => e.category))];
   }, [normalizedData]);
 
-  const hmrcReport = useMemo(() => {
-    const totalRevenue = [...normalizedData.orders, ...normalizedData.manualSales].reduce((sum, s: any) => sum + s.total, 0);
-    const costOfGoodsSold = normalizedData.purchases.reduce((sum, p) => sum + p.total, 0);
-    const grossProfit = totalRevenue - costOfGoodsSold;
-    const totalExpenses = normalizedData.expenses.reduce((sum, e) => sum + e.amount, 0);
-    const netProfit = grossProfit - totalExpenses;
+  // YTD calculations
+  const ytdStats = useMemo(() => {
+    const ytdOrders = normalizedData.orders.filter(o => o.createdAt >= ytdStart);
+    const ytdManual = normalizedData.manualSales.filter(s => s.soldAt >= ytdStart);
+    const ytdExpenses = normalizedData.expenses.filter(e => e.date >= ytdStart);
+    const ytdPurchases = normalizedData.purchases.filter(p => p.purchasedAt >= ytdStart);
 
-    // UK tax estimation: 19% corporation tax for profits (simplified)
-    // Self-employed allowance is £1,000
-    const taxableProfit = Math.max(0, netProfit - 100000); // Simplified threshold
-    const estimatedTax = Math.max(0, Math.round(taxableProfit * 0.19));
+    const revenue = ytdOrders.reduce((sum, o) => sum + o.total, 0) + ytdManual.reduce((sum, s) => sum + s.total, 0);
+    const cogs = ytdPurchases.reduce((sum, p) => sum + p.total, 0);
+    const expenses = ytdExpenses.reduce((sum, e) => sum + e.amount, 0);
+    const profit = revenue - cogs - expenses;
 
-    return {
-      totalRevenue,
-      costOfGoodsSold,
-      grossProfit,
-      grossMargin: totalRevenue > 0 ? (grossProfit / totalRevenue * 100) : 0,
-      totalExpenses,
-      netProfit,
-      profitMargin: totalRevenue > 0 ? (netProfit / totalRevenue * 100) : 0,
-      estimatedTax,
-    };
-  }, [normalizedData]);
+    return { revenue, cogs, expenses, profit };
+  }, [normalizedData, ytdStart]);
+
+  // Tax year calculations
+  const taxYearStart = getCurrentTaxYear();
+  const taxYearStats = useMemo(() => {
+    const tyOrders = normalizedData.orders.filter(o => o.createdAt >= taxYearStart);
+    const tyManual = normalizedData.manualSales.filter(s => s.soldAt >= taxYearStart);
+    const tyExpenses = normalizedData.expenses.filter(e => e.date >= taxYearStart);
+    const tyPurchases = normalizedData.purchases.filter(p => p.purchasedAt >= taxYearStart);
+
+    const revenue = tyOrders.reduce((sum, o) => sum + o.total, 0) + tyManual.reduce((sum, s) => sum + s.total, 0);
+    const cogs = tyPurchases.reduce((sum, p) => sum + p.total, 0);
+    const expenses = tyExpenses.reduce((sum, e) => sum + e.amount, 0);
+    const profit = revenue - cogs - expenses;
+
+    return { revenue, cogs, expenses, profit };
+  }, [normalizedData, taxYearStart]);
+
+  // Drill-down data
+  const drillDownData = useMemo(() => {
+    if (!drillDownMonth) return [];
+
+    const items: any[] = [];
+
+    normalizedData.orders.forEach(o => {
+      const monthStr = o.createdAt.toISOString().slice(0, 7);
+      if (monthStr === drillDownMonth) {
+        items.push({
+          date: o.createdAt,
+          type: 'INCOME',
+          description: 'Website order',
+          amount: o.total,
+          category: 'Sales',
+          id: o.id,
+        });
+      }
+    });
+
+    normalizedData.manualSales.forEach(s => {
+      const monthStr = s.soldAt.toISOString().slice(0, 7);
+      if (monthStr === drillDownMonth) {
+        items.push({
+          date: s.soldAt,
+          type: 'INCOME',
+          description: 'Manual sale',
+          amount: s.total,
+          category: 'Sales',
+          id: s.id,
+        });
+      }
+    });
+
+    normalizedData.expenses.forEach(e => {
+      const monthStr = e.date.toISOString().slice(0, 7);
+      if (monthStr === drillDownMonth) {
+        items.push({
+          date: e.date,
+          type: 'EXPENSE',
+          description: e.category,
+          amount: e.amount,
+          category: e.category,
+          id: e.id,
+        });
+      }
+    });
+
+    normalizedData.purchases.forEach(p => {
+      const monthStr = p.purchasedAt.toISOString().slice(0, 7);
+      if (monthStr === drillDownMonth) {
+        items.push({
+          date: p.purchasedAt,
+          type: 'EXPENSE',
+          description: 'Stock purchase',
+          amount: p.total,
+          category: 'Cost of goods',
+          id: p.id,
+        });
+      }
+    });
+
+    // Sort
+    const sorted = [...items].sort((a, b) => {
+      if (sortBy.field === 'date') {
+        return sortBy.order === 'desc' ? b.date - a.date : a.date - b.date;
+      } else if (sortBy.field === 'amount') {
+        return sortBy.order === 'desc' ? b.amount - a.amount : a.amount - b.amount;
+      }
+      return 0;
+    });
+
+    return sorted;
+  }, [drillDownMonth, normalizedData, sortBy]);
 
   const handleExportLedger = () => {
     const from = fromDate ? new Date(fromDate) : null;
     const to = toDate ? new Date(`${toDate}T23:59:59`) : null;
 
-    const ledgerRows = [
-      ...normalizedData.orders
-        .filter((o) => (!from || o.createdAt >= from) && (!to || o.createdAt <= to))
-        .map((o) => ({
-          date: o.createdAt,
-          type: 'INCOME' as const,
-          description: 'Website order',
-          amount: o.total,
-          category: 'Sales',
-        })),
-      ...normalizedData.manualSales
-        .filter((s) => (!from || s.soldAt >= from) && (!to || s.soldAt <= to))
-        .map((s) => ({
-          date: s.soldAt,
-          type: 'INCOME' as const,
-          description: 'Manual sale',
-          amount: s.total,
-          category: 'Sales',
-        })),
-      ...normalizedData.purchases
-        .filter((p) => (!from || p.purchasedAt >= from) && (!to || p.purchasedAt <= to))
-        .map((p) => ({
-          date: p.purchasedAt,
-          type: 'EXPENSE' as const,
-          description: 'Stock purchase',
-          amount: p.total,
-          category: 'Cost of goods',
-        })),
-      ...normalizedData.expenses
-        .filter((e) => (!from || e.date >= from) && (!to || e.date <= to))
-        .map((e) => ({
-          date: e.date,
-          type: 'EXPENSE' as const,
-          description: e.category,
-          amount: e.amount,
-          category: e.category,
-        })),
-    ];
+    let ledgerRows: any[] = [];
+
+    if (exportFormat === 'tax-year') {
+      from = taxYearStart;
+      to = new Date();
+    }
+
+    if (exportFormat === 'all' || exportFormat === 'income') {
+      ledgerRows.push(
+        ...normalizedData.orders
+          .filter((o) => (!from || o.createdAt >= from) && (!to || o.createdAt <= to))
+          .map((o) => ({
+            date: o.createdAt,
+            type: 'INCOME' as const,
+            description: 'Website order',
+            amount: o.total,
+            category: 'Sales',
+          })),
+        ...normalizedData.manualSales
+          .filter((s) => (!from || s.soldAt >= from) && (!to || s.soldAt <= to))
+          .map((s) => ({
+            date: s.soldAt,
+            type: 'INCOME' as const,
+            description: 'Manual sale',
+            amount: s.total,
+            category: 'Sales',
+          }))
+      );
+    }
+
+    if (exportFormat === 'all' || exportFormat === 'expenses') {
+      ledgerRows.push(
+        ...normalizedData.purchases
+          .filter((p) => (!from || p.purchasedAt >= from) && (!to || p.purchasedAt <= to))
+          .map((p) => ({
+            date: p.purchasedAt,
+            type: 'EXPENSE' as const,
+            description: 'Stock purchase',
+            amount: p.total,
+            category: 'Cost of goods',
+          })),
+        ...normalizedData.expenses
+          .filter((e) => (!from || e.date >= from) && (!to || e.date <= to))
+          .map((e) => ({
+            date: e.date,
+            type: 'EXPENSE' as const,
+            description: e.category,
+            amount: e.amount,
+            category: e.category,
+          }))
+      );
+    }
+
+    let title = 'Ledger Export';
+    if (exportFormat === 'income') title = 'Income Export';
+    else if (exportFormat === 'expenses') title = 'Expenses Export';
+    else if (exportFormat === 'tax-year') title = `Tax Year ${taxYearStart.getFullYear()}-${taxYearStart.getFullYear() + 1}`;
 
     const dateRange = fromDate || toDate
       ? ` (${fromDate || 'start'} to ${toDate || 'today'})`
       : '';
-    const csv = generateLedgerCSV(ledgerRows, `Ledger Export${dateRange}`);
-    downloadCSV(csv, `ledger-${new Date().toISOString().split('T')[0]}.csv`);
+
+    const csv = generateLedgerCSV(ledgerRows, `${title}${dateRange}`);
+    downloadCSV(csv, `${title.toLowerCase().replace(/\s+/g, '-')}-${new Date().toISOString().split('T')[0]}.csv`);
   };
 
+  const filteredExpenses = expenseCategoryFilter
+    ? normalizedData.expenses.filter(e => e.category === expenseCategoryFilter)
+    : normalizedData.expenses;
+
   return (
     <>
-      {/* Date Filtering */}
+      {/* Date Filtering & Export */}
       <div className="mt-6 border border-line bg-surface p-4">
         <p className="tag-label mb-3">Filter & Export</p>
-        <div className="flex flex-wrap items-center gap-3">
-          <label className="flex items-center gap-1 text-sm">
-            From:
-            <input
-              type="date"
-              value={fromDate}
-              onChange={(e) => setFromDate(e.target.value)}
-              className="border border-line bg-paper px-2 py-1"
-            />
-          </label>
-          <label className="flex items-center gap-1 text-sm">
-            To:
-            <input
-              type="date"
-              value={toDate}
-              onChange={(e) => setToDate(e.target.value)}
-              className="border border-line bg-paper px-2 py-1"
-            />
-          </label>
-          <button
-            onClick={handleExportLedger}
-            className="border border-ink px-4 py-1.5 text-sm hover:border-clay hover:bg-clay hover:text-paper"
-          >
-            ⬇ Export CSV
-          </button>
-          {(fromDate || toDate) && (
-            <button
-              onClick={() => {
-                setFromDate('');
-                setToDate('');
-              }}
-              className="text-sm text-muted hover:text-ink"
+        <div className="space-y-3">
+          <div className="flex flex-wrap items-center gap-3">
+            <label className="flex items-center gap-1 text-sm">
+              From:
+              <input
+                type="date"
+                value={fromDate}
+                onChange={(e) => setFromDate(e.target.value)}
+                className="border border-line bg-paper px-2 py-1"
+              />
+            </label>
+            <label className="flex items-center gap-1 text-sm">
+              To:
+              <input
+                type="date"
+                value={toDate}
+                onChange={(e) => setToDate(e.target.value)}
+                className="border border-line bg-paper px-2 py-1"
+              />
+            </label>
+            {(fromDate || toDate) && (
+              <button
+                onClick={() => {
+                  setFromDate('');
+                  setToDate('');
+                }}
+                className="text-sm text-muted hover:text-ink"
+              >
+                Clear dates
+              </button>
+            )}
+          </div>
+
+          <div className="flex flex-wrap items-center gap-3">
+            <select
+              value={exportFormat}
+              onChange={(e) => setExportFormat(e.target.value as any)}
+              className="border border-line bg-paper px-3 py-1.5 text-sm"
             >
-              Clear dates
+              <option value="all">All transactions</option>
+              <option value="income">Income only</option>
+              <option value="expenses">Expenses only</option>
+              <option value="tax-year">Tax year (Apr-Apr)</option>
+            </select>
+
+            <button
+              onClick={handleExportLedger}
+              className="border border-ink px-4 py-1.5 text-sm hover:border-clay hover:bg-clay hover:text-paper"
+            >
+              ⬇ Export CSV
             </button>
-          )}
+          </div>
         </div>
       </div>
 
-      <div className="mt-6 inline-flex border border-line">
-        {[
-          { id: 'trends', label: 'Trends' },
-          { id: 'monthly-profit', label: 'Monthly Profit' },
-          { id: 'expense-breakdown', label: 'Expenses' },
-          { id: 'cash-flow', label: 'Cash Flow' },
-          { id: 'hmrc', label: 'HMRC Report' },
-        ].map((t) => (
-          <button
-            key={t.id}
-            onClick={() => setTab(t.id)}
-            className={`px-4 py-1.5 text-sm ${tab === t.id ? 'bg-ink text-paper' : 'hover:text-clay'}`}
-          >
-            {t.label}
-          </button>
-        ))}
+      {/* Tabs */}
+      <div className="mt-6 overflow-x-auto">
+        <div className="inline-flex border border-line">
+          {[
+            { id: 'kpi', label: 'KPIs' },
+            { id: 'trends', label: 'Trends' },
+            { id: 'monthly-profit', label: 'Monthly Profit' },
+            { id: 'income-breakdown', label: 'Income' },
+            { id: 'expense-breakdown', label: 'Expenses' },
+            { id: 'revenue-vs-expenses', label: 'Revenue vs Expenses' },
+            { id: 'cash-flow', label: 'Cash Flow' },
+            { id: 'tax-year', label: 'Tax Year' },
+            { id: 'hmrc', label: 'HMRC Report' },
+          ].map((t) => (
+            <button
+              key={t.id}
+              onClick={() => setTab(t.id)}
+              className={`px-3 py-1.5 text-sm whitespace-nowrap ${tab === t.id ? 'bg-ink text-paper' : 'hover:text-clay'}`}
+            >
+              {t.label}
+            </button>
+          ))}
+        </div>
       </div>
 
       <div className="mt-8">
+        {/* KPI Dashboard */}
+        {tab === 'kpi' && (
+          <div className="space-y-6">
+            <div>
+              <h3 className="font-display text-lg mb-4">Year-to-Date Summary (Calendar Year)</h3>
+              <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+                <div className="border border-line p-4">
+                  <p className="tag-label">YTD Revenue</p>
+                  <p className="mt-2 font-mono text-xl text-green-600">
+                    <Price cents={ytdStats.revenue} />
+                  </p>
+                </div>
+                <div className="border border-line p-4">
+                  <p className="tag-label">YTD COGS</p>
+                  <p className="mt-2 font-mono text-xl">
+                    <Price cents={ytdStats.cogs} />
+                  </p>
+                </div>
+                <div className="border border-line p-4">
+                  <p className="tag-label">YTD Operating Expenses</p>
+                  <p className="mt-2 font-mono text-xl">
+                    <Price cents={ytdStats.expenses} />
+                  </p>
+                </div>
+                <div className="border-2 border-clay p-4">
+                  <p className="tag-label">YTD Profit</p>
+                  <p className={`mt-2 font-mono text-xl font-medium ${ytdStats.profit >= 0 ? 'text-green-600' : 'text-splash-pink'}`}>
+                    <Price cents={ytdStats.profit} />
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div>
+              <h3 className="font-display text-lg mb-4">Income Breakdown</h3>
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div className="border border-line p-4">
+                  <p className="tag-label">Website Sales</p>
+                  <p className="mt-2 font-mono text-xl">
+                    <Price cents={incomeBreakdown.webSales} />
+                  </p>
+                  <p className="mt-1 text-xs text-muted">{incomeBreakdown.webPercent.toFixed(1)}% of total</p>
+                </div>
+                <div className="border border-line p-4">
+                  <p className="tag-label">Manual Sales</p>
+                  <p className="mt-2 font-mono text-xl">
+                    <Price cents={incomeBreakdown.manualSales} />
+                  </p>
+                  <p className="mt-1 text-xs text-muted">{incomeBreakdown.manualPercent.toFixed(1)}% of total</p>
+                </div>
+              </div>
+            </div>
+
+            <div>
+              <h3 className="font-display text-lg mb-4">Latest Month Growth</h3>
+              <div className="border border-line p-4">
+                <p className="tag-label">Month-over-Month Change</p>
+                <p className={`mt-2 font-mono text-2xl font-medium ${growthMetrics.momGrowth >= 0 ? 'text-green-600' : 'text-splash-pink'}`}>
+                  {growthMetrics.momGrowth >= 0 ? '+' : ''}{growthMetrics.momGrowth.toFixed(1)}%
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Trends Chart */}
         {tab === 'trends' && (
           <div className="space-y-8">
             <div>
               <h3 className="font-display text-lg mb-4">Monthly Profit Trend</h3>
               <div className="overflow-x-auto">
                 <svg viewBox="0 0 1000 300" className="w-full border border-line bg-surface p-4">
-                  {/* Y-axis */}
                   <line x1="50" y1="20" x2="50" y2="260" stroke="currentColor" strokeWidth="2" className="text-line" />
-                  {/* X-axis */}
                   <line x1="50" y1="260" x2="950" y2="260" stroke="currentColor" strokeWidth="2" className="text-line" />
 
                   {monthlyProfit.slice(-12).map((row, i) => {
@@ -262,8 +476,7 @@ export default function ReportsPageClient({ data }: { data: ReportData }) {
                     const isPositive = row.profit >= 0;
 
                     return (
-                      <g key={row.month}>
-                        {/* Bar */}
+                      <g key={row.month} onClick={() => setDrillDownMonth(row.month)} style={{ cursor: 'pointer' }}>
                         <rect
                           x={x - 30}
                           y={y}
@@ -271,8 +484,8 @@ export default function ReportsPageClient({ data }: { data: ReportData }) {
                           height={barHeight}
                           fill={isPositive ? '#10b981' : '#ec4899'}
                           opacity="0.8"
+                          className="hover:opacity-100"
                         />
-                        {/* Month label */}
                         <text
                           x={x}
                           y="280"
@@ -283,7 +496,6 @@ export default function ReportsPageClient({ data }: { data: ReportData }) {
                         >
                           {row.month.slice(5)}
                         </text>
-                        {/* Value label */}
                         <text
                           x={x}
                           y={y - 5}
@@ -300,6 +512,7 @@ export default function ReportsPageClient({ data }: { data: ReportData }) {
                   })}
                 </svg>
               </div>
+              <p className="mt-2 text-xs text-muted">💡 Click a bar to drill down into transaction details</p>
             </div>
 
             <div className="grid gap-4 sm:grid-cols-3">
@@ -325,20 +538,21 @@ export default function ReportsPageClient({ data }: { data: ReportData }) {
           </div>
         )}
 
+        {/* Monthly Profit Table */}
         {tab === 'monthly-profit' && (
           <div className="overflow-x-auto">
             <table className="w-full border-collapse text-sm">
               <thead>
                 <tr className="border-b border-line">
-                  <th className="text-left py-2 px-3 font-medium">Month</th>
-                  <th className="text-right py-2 px-3 font-medium">Revenue</th>
-                  <th className="text-right py-2 px-3 font-medium">Expenses</th>
-                  <th className="text-right py-2 px-3 font-medium">Profit</th>
+                  <th className="text-left py-2 px-3 font-medium cursor-pointer hover:text-clay" onClick={() => setSortBy({ field: 'month', order: sortBy.order === 'asc' ? 'desc' : 'asc' })}>Month {sortBy.field === 'month' ? (sortBy.order === 'desc' ? '▼' : '▲') : ''}</th>
+                  <th className="text-right py-2 px-3 font-medium cursor-pointer hover:text-clay" onClick={() => setSortBy({ field: 'revenue', order: sortBy.order === 'asc' ? 'desc' : 'asc' })}>Revenue {sortBy.field === 'revenue' ? (sortBy.order === 'desc' ? '▼' : '▲') : ''}</th>
+                  <th className="text-right py-2 px-3 font-medium cursor-pointer hover:text-clay" onClick={() => setSortBy({ field: 'expenses', order: sortBy.order === 'asc' ? 'desc' : 'asc' })}>Expenses {sortBy.field === 'expenses' ? (sortBy.order === 'desc' ? '▼' : '▲') : ''}</th>
+                  <th className="text-right py-2 px-3 font-medium cursor-pointer hover:text-clay" onClick={() => setSortBy({ field: 'profit', order: sortBy.order === 'asc' ? 'desc' : 'asc' })}>Profit {sortBy.field === 'profit' ? (sortBy.order === 'desc' ? '▼' : '▲') : ''}</th>
                 </tr>
               </thead>
               <tbody>
                 {monthlyProfit.map((row) => (
-                  <tr key={row.month} className="border-b border-line hover:bg-surface">
+                  <tr key={row.month} className="border-b border-line hover:bg-surface cursor-pointer" onClick={() => setDrillDownMonth(row.month)}>
                     <td className="py-2 px-3">{row.month}</td>
                     <td className="text-right py-2 px-3 font-mono">
                       <Price cents={row.revenue} />
@@ -356,23 +570,174 @@ export default function ReportsPageClient({ data }: { data: ReportData }) {
           </div>
         )}
 
-        {tab === 'expense-breakdown' && (
-          <div className="space-y-3">
-            {expenseBreakdown.length === 0 ? (
-              <p className="text-sm text-muted">No expenses recorded yet.</p>
-            ) : (
-              expenseBreakdown.map((row) => (
-                <div key={row.category} className="flex items-center justify-between border-b border-line pb-2">
-                  <span className="text-sm">{row.category}</span>
-                  <span className="font-mono">
-                    <Price cents={row.total} />
-                  </span>
+        {/* Income Breakdown */}
+        {tab === 'income-breakdown' && (
+          <div className="space-y-6">
+            <div>
+              <h3 className="font-display text-lg mb-4">Revenue by Source</h3>
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div className="border border-line p-4">
+                  <p className="tag-label">Website Orders</p>
+                  <p className="mt-2 font-mono text-2xl">
+                    <Price cents={incomeBreakdown.webSales} />
+                  </p>
+                  <p className="mt-1 text-xs text-muted">{incomeBreakdown.webPercent.toFixed(1)}% of revenue</p>
                 </div>
-              ))
+                <div className="border border-line p-4">
+                  <p className="tag-label">Manual Sales</p>
+                  <p className="mt-2 font-mono text-2xl">
+                    <Price cents={incomeBreakdown.manualSales} />
+                  </p>
+                  <p className="mt-1 text-xs text-muted">{incomeBreakdown.manualPercent.toFixed(1)}% of revenue</p>
+                </div>
+              </div>
+            </div>
+
+            {/* Income pie chart */}
+            <div className="border border-line p-4">
+              <svg viewBox="0 0 200 200" className="w-full max-w-sm mx-auto">
+                {incomeBreakdown.webSales > 0 && (
+                  <circle cx="100" cy="100" r="80" fill="#10b981" opacity="0.8" />
+                )}
+                {incomeBreakdown.manualSales > 0 && (
+                  <circle cx="100" cy="100" r="80" fill="#3b82f6" opacity="0.8" />
+                )}
+                <text x="100" y="100" textAnchor="middle" dy="0.3em" fontSize="20" fontWeight="bold" fill="white">
+                  {incomeBreakdown.total > 0 ? `£${(incomeBreakdown.total / 100).toFixed(0)}` : 'No sales'}
+                </text>
+              </svg>
+              <div className="mt-4 space-y-2 text-sm">
+                <div className="flex items-center gap-2">
+                  <div className="w-4 h-4 rounded" style={{ backgroundColor: '#10b981' }}></div>
+                  <span>Website: <span className="font-mono"><Price cents={incomeBreakdown.webSales} /></span></span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <div className="w-4 h-4 rounded" style={{ backgroundColor: '#3b82f6' }}></div>
+                  <span>Manual: <span className="font-mono"><Price cents={incomeBreakdown.manualSales} /></span></span>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Expense Breakdown */}
+        {tab === 'expense-breakdown' && (
+          <div className="space-y-6">
+            <div>
+              <h3 className="font-display text-lg mb-4">Expenses by Category</h3>
+              {expenseCategoryFilter && (
+                <button
+                  onClick={() => setExpenseCategoryFilter('')}
+                  className="mb-3 text-sm text-muted hover:text-ink"
+                >
+                  Clear category filter
+                </button>
+              )}
+              {expenseBreakdown.length === 0 ? (
+                <p className="text-sm text-muted">No expenses recorded yet.</p>
+              ) : (
+                <div className="space-y-2">
+                  {expenseBreakdown.map((row) => (
+                    <div
+                      key={row.category}
+                      className={`flex items-center justify-between border-b border-line pb-2 cursor-pointer hover:bg-surface px-2 py-1 rounded ${
+                        expenseCategoryFilter === row.category ? 'bg-surface' : ''
+                      }`}
+                      onClick={() => setExpenseCategoryFilter(expenseCategoryFilter === row.category ? '' : row.category)}
+                    >
+                      <span className="text-sm font-medium">{row.category}</span>
+                      <span className="font-mono">
+                        <Price cents={row.total} />
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            {filteredExpenses.length > 0 && (
+              <div>
+                <h3 className="font-display text-lg mb-4">
+                  {expenseCategoryFilter ? `Expenses: ${expenseCategoryFilter}` : 'All Expense Transactions'}
+                </h3>
+                <div className="overflow-x-auto">
+                  <table className="w-full border-collapse text-sm">
+                    <thead>
+                      <tr className="border-b border-line">
+                        <th className="text-left py-2 px-3 font-medium">Date</th>
+                        <th className="text-left py-2 px-3 font-medium">Category</th>
+                        <th className="text-left py-2 px-3 font-medium">Description</th>
+                        <th className="text-right py-2 px-3 font-medium">Amount</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {filteredExpenses.map((exp) => (
+                        <tr key={exp.id} className="border-b border-line hover:bg-surface">
+                          <td className="py-2 px-3 text-xs font-mono">{exp.date.toLocaleDateString('en-GB')}</td>
+                          <td className="py-2 px-3 text-xs">{exp.category}</td>
+                          <td className="py-2 px-3 text-xs text-muted truncate" title={exp.category}>{exp.category}</td>
+                          <td className="text-right py-2 px-3 font-mono">
+                            <Price cents={exp.amount} />
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
             )}
           </div>
         )}
 
+        {/* Revenue vs Expenses */}
+        {tab === 'revenue-vs-expenses' && (
+          <div className="space-y-8">
+            <div>
+              <h3 className="font-display text-lg mb-4">Revenue vs Operating Expenses Trend</h3>
+              <div className="overflow-x-auto">
+                <svg viewBox="0 0 1000 350" className="w-full border border-line bg-surface p-4">
+                  <line x1="50" y1="20" x2="50" y2="300" stroke="currentColor" strokeWidth="2" className="text-line" />
+                  <line x1="50" y1="300" x2="950" y2="300" stroke="currentColor" strokeWidth="2" className="text-line" />
+
+                  {monthlyProfit.slice(-12).map((row, i) => {
+                    const maxValue = Math.max(...monthlyProfit.map((r) => Math.max(r.revenue, r.expenses)), 1);
+                    const x = 50 + (i / 11) * 900;
+
+                    const revHeight = (row.revenue / maxValue) * 220;
+                    const expHeight = (row.expenses / maxValue) * 220;
+                    const revY = 300 - revHeight;
+                    const expY = 300 - expHeight;
+
+                    return (
+                      <g key={row.month}>
+                        {/* Revenue bar (green) */}
+                        <rect x={x - 20} y={revY} width="18" height={revHeight} fill="#10b981" opacity="0.8" />
+                        {/* Expenses bar (red) */}
+                        <rect x={x + 2} y={expY} width="18" height={expHeight} fill="#ef4444" opacity="0.8" />
+                        {/* Month label */}
+                        <text x={x} y="320" textAnchor="middle" fontSize="12" className="text-muted" fill="currentColor">
+                          {row.month.slice(5)}
+                        </text>
+                      </g>
+                    );
+                  })}
+                </svg>
+              </div>
+              <div className="mt-4 flex gap-4 justify-center text-sm">
+                <div className="flex items-center gap-2">
+                  <div className="w-4 h-4 rounded" style={{ backgroundColor: '#10b981' }}></div>
+                  <span>Revenue</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <div className="w-4 h-4 rounded" style={{ backgroundColor: '#ef4444' }}></div>
+                  <span>Operating Expenses</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Cash Flow */}
         {tab === 'cash-flow' && (
           <div className="overflow-x-auto">
             <table className="w-full border-collapse text-sm">
@@ -385,55 +750,112 @@ export default function ReportsPageClient({ data }: { data: ReportData }) {
                 </tr>
               </thead>
               <tbody>
-                {cashFlow.map((row) => (
-                  <tr key={row.month} className="border-b border-line hover:bg-surface">
-                    <td className="py-2 px-3">{row.month}</td>
-                    <td className="text-right py-2 px-3 font-mono">
-                      <Price cents={row.in} />
-                    </td>
-                    <td className="text-right py-2 px-3 font-mono">
-                      <Price cents={row.out} />
-                    </td>
-                    <td className={`text-right py-2 px-3 font-mono font-medium ${row.cumNet >= 0 ? 'text-green-600' : 'text-splash-pink'}`}>
-                      <Price cents={row.cumNet} />
-                    </td>
-                  </tr>
-                ))}
+                {monthlyProfit.map((row) => {
+                  // Recalculate cumulative for this view
+                  const cumIn = monthlyProfit
+                    .filter((m) => m.month <= row.month)
+                    .reduce((sum, m) => sum + m.revenue, 0);
+                  const cumOut = monthlyProfit
+                    .filter((m) => m.month <= row.month)
+                    .reduce((sum, m) => sum + m.expenses, 0);
+                  const cumNet = cumIn - cumOut;
+
+                  return (
+                    <tr key={row.month} className="border-b border-line hover:bg-surface">
+                      <td className="py-2 px-3">{row.month}</td>
+                      <td className="text-right py-2 px-3 font-mono text-green-600">
+                        <Price cents={row.revenue} />
+                      </td>
+                      <td className="text-right py-2 px-3 font-mono text-splash-pink">
+                        <Price cents={row.expenses} />
+                      </td>
+                      <td className={`text-right py-2 px-3 font-mono font-medium ${cumNet >= 0 ? 'text-green-600' : 'text-splash-pink'}`}>
+                        <Price cents={cumNet} />
+                      </td>
+                    </tr>
+                  );
+                })}
               </tbody>
             </table>
           </div>
         )}
 
+        {/* Tax Year Summary */}
+        {tab === 'tax-year' && (
+          <div className="space-y-6">
+            <div className="border border-splash-blue/40 bg-splash-blue/5 px-4 py-3 text-sm text-splash-blue">
+              ⓘ UK Tax Year: April 6, {taxYearStart.getFullYear()} to April 5, {taxYearStart.getFullYear() + 1}
+            </div>
+
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+              <div className="border border-line p-4">
+                <p className="tag-label">Tax Year Revenue</p>
+                <p className="mt-2 font-mono text-xl text-green-600">
+                  <Price cents={taxYearStats.revenue} />
+                </p>
+              </div>
+              <div className="border border-line p-4">
+                <p className="tag-label">Tax Year COGS</p>
+                <p className="mt-2 font-mono text-xl">
+                  <Price cents={taxYearStats.cogs} />
+                </p>
+              </div>
+              <div className="border border-line p-4">
+                <p className="tag-label">Tax Year Expenses</p>
+                <p className="mt-2 font-mono text-xl">
+                  <Price cents={taxYearStats.expenses} />
+                </p>
+              </div>
+              <div className="border-2 border-clay p-4">
+                <p className="tag-label">Tax Year Profit</p>
+                <p className={`mt-2 font-mono text-xl font-medium ${taxYearStats.profit >= 0 ? 'text-green-600' : 'text-splash-pink'}`}>
+                  <Price cents={taxYearStats.profit} />
+                </p>
+              </div>
+            </div>
+
+            <div className="border border-clay p-6">
+              <p className="text-sm">
+                Use the Tax Year export option above to download a CSV for your accountant.
+              </p>
+            </div>
+          </div>
+        )}
+
+        {/* HMRC Report */}
         {tab === 'hmrc' && (
           <div className="space-y-6">
             <div className="border border-splash-blue/40 bg-splash-blue/5 px-4 py-3 text-sm text-splash-blue">
               ⓘ Summary for HMRC Self Assessment. Keep invoices and receipts as evidence.
             </div>
 
+            {/* Use tax year stats */}
             <div className="grid gap-4 sm:grid-cols-2">
               <div className="border border-line p-4">
                 <p className="tag-label">Total Turnover</p>
                 <p className="mt-2 font-mono text-2xl">
-                  <Price cents={hmrcReport.totalRevenue} />
+                  <Price cents={taxYearStats.revenue} />
                 </p>
               </div>
               <div className="border border-line p-4">
                 <p className="tag-label">Cost of Goods Sold</p>
                 <p className="mt-2 font-mono text-2xl">
-                  <Price cents={hmrcReport.costOfGoodsSold} />
+                  <Price cents={taxYearStats.cogs} />
                 </p>
               </div>
               <div className="border border-line p-4">
                 <p className="tag-label">Gross Profit</p>
                 <p className="mt-2 font-mono text-2xl">
-                  <Price cents={hmrcReport.grossProfit} />
+                  <Price cents={taxYearStats.revenue - taxYearStats.cogs} />
+                </p>
+                <p className="mt-1 text-xs text-muted">
+                  {taxYearStats.revenue > 0 ? ((taxYearStats.revenue - taxYearStats.cogs) / taxYearStats.revenue * 100).toFixed(1) : 0}% margin
                 </p>
-                <p className="mt-1 text-xs text-muted">{hmrcReport.grossMargin.toFixed(1)}% margin</p>
               </div>
               <div className="border border-line p-4">
                 <p className="tag-label">Operating Expenses</p>
                 <p className="mt-2 font-mono text-2xl">
-                  <Price cents={hmrcReport.totalExpenses} />
+                  <Price cents={taxYearStats.expenses} />
                 </p>
               </div>
             </div>
@@ -441,36 +863,80 @@ export default function ReportsPageClient({ data }: { data: ReportData }) {
             <div className="border-2 border-line p-6">
               <div className="flex items-baseline justify-between">
                 <p className="font-display text-lg">Net Profit (before tax)</p>
-                <p className={`font-mono text-3xl font-medium ${hmrcReport.netProfit >= 0 ? 'text-green-600' : 'text-splash-pink'}`}>
-                  <Price cents={hmrcReport.netProfit} />
+                <p className={`font-mono text-3xl font-medium ${taxYearStats.profit >= 0 ? 'text-green-600' : 'text-splash-pink'}`}>
+                  <Price cents={taxYearStats.profit} />
                 </p>
               </div>
-              <p className="mt-2 text-xs text-muted">{hmrcReport.profitMargin.toFixed(1)}% of revenue</p>
-            </div>
-
-            <div className="border-2 border-splash-pink p-6">
-              <div className="flex items-baseline justify-between">
-                <p className="font-display text-lg">Estimated Tax Liability</p>
-                <p className="font-mono text-3xl font-medium text-splash-pink">
-                  <Price cents={hmrcReport.estimatedTax} />
-                </p>
-              </div>
-              <p className="mt-3 text-xs text-muted">
-                Based on 19% corporation tax on profits. Self-employed? Your actual rate may differ. Consult an accountant for accurate figures.
+              <p className="mt-2 text-xs text-muted">
+                {taxYearStats.revenue > 0 ? (taxYearStats.profit / taxYearStats.revenue * 100).toFixed(1) : 0}% of revenue
               </p>
             </div>
 
             <div className="text-xs text-muted space-y-2">
               <p><strong>What to report to HMRC:</strong></p>
               <ul className="list-disc pl-5 space-y-1">
-                <li>Total turnover: <span className="font-mono"><Price cents={hmrcReport.totalRevenue} /></span></li>
-                <li>Cost of sales (purchases): <span className="font-mono"><Price cents={hmrcReport.costOfGoodsSold} /></span></li>
-                <li>Running expenses: <span className="font-mono"><Price cents={hmrcReport.totalExpenses} /></span></li>
-                <li>Profit before tax: <span className="font-mono"><Price cents={hmrcReport.netProfit} /></span></li>
+                <li>Total turnover: <span className="font-mono"><Price cents={taxYearStats.revenue} /></span></li>
+                <li>Cost of sales (purchases): <span className="font-mono"><Price cents={taxYearStats.cogs} /></span></li>
+                <li>Running expenses: <span className="font-mono"><Price cents={taxYearStats.expenses} /></span></li>
+                <li>Profit before tax: <span className="font-mono"><Price cents={taxYearStats.profit} /></span></li>
               </ul>
             </div>
           </div>
         )}
+
+        {/* Drill-down Modal */}
+        {drillDownMonth && (
+          <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
+            <div className="bg-paper border border-line max-w-2xl w-full max-h-96 overflow-auto">
+              <div className="sticky top-0 bg-paper border-b border-line px-4 py-3 flex items-center justify-between">
+                <h3 className="font-display text-lg">Transactions: {drillDownMonth}</h3>
+                <button
+                  onClick={() => setDrillDownMonth(null)}
+                  className="text-muted hover:text-ink"
+                >
+                  ✕
+                </button>
+              </div>
+
+              <div className="overflow-x-auto">
+                <table className="w-full border-collapse text-sm">
+                  <thead>
+                    <tr className="border-b border-line bg-surface">
+                      <th className="text-left py-2 px-3 font-medium cursor-pointer hover:text-clay" onClick={() => setSortBy({ field: 'date', order: sortBy.order === 'asc' ? 'desc' : 'asc' })}>
+                        Date {sortBy.field === 'date' ? (sortBy.order === 'desc' ? '▼' : '▲') : ''}
+                      </th>
+                      <th className="text-left py-2 px-3 font-medium">Type</th>
+                      <th className="text-left py-2 px-3 font-medium">Description</th>
+                      <th className="text-right py-2 px-3 font-medium cursor-pointer hover:text-clay" onClick={() => setSortBy({ field: 'amount', order: sortBy.order === 'asc' ? 'desc' : 'asc' })}>
+                        Amount {sortBy.field === 'amount' ? (sortBy.order === 'desc' ? '▼' : '▲') : ''}
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {drillDownData.map((item) => (
+                      <tr key={`${item.id}-${item.date}`} className="border-b border-line hover:bg-surface">
+                        <td className="py-2 px-3 text-xs font-mono">{item.date.toLocaleDateString('en-GB')}</td>
+                        <td className="py-2 px-3">
+                          <span className={`px-2 py-1 rounded text-xs font-medium ${item.type === 'INCOME' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>
+                            {item.type}
+                          </span>
+                        </td>
+                        <td className="py-2 px-3 text-xs">{item.description}</td>
+                        <td className="text-right py-2 px-3 font-mono font-medium">
+                          <Price cents={item.amount} />
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+
+              <div className="border-t border-line bg-surface px-4 py-3 text-sm">
+                <p className="text-muted">Total: <span className="font-mono font-medium text-ink"><Price cents={drillDownData.reduce((sum, item) => item.type === 'INCOME' ? sum + item.amount : sum - item.amount, 0)} /></span></p>
+              </div>
+            </div>
+          </div>
+        )}
       </div>
     </>
   );