feat: finance page overhaul — pie charts, month nav, tab improvements

- Overview tab: 3 donut pie charts (expenses by category, sub payments, invoiced) each with independent month navigation arrows
- Expenses tab: big red total in category sidebar, left-aligned category column, white text
- Subcontractors tab: big gold total in sidebar, pending/paid breakdown with gold highlight
- Invoices tab: big green total in companies sidebar, dashboard-inline-link for invoice# and company, StatusBadge with Invoiced/Paid labels, column widths tuned
- StatusBadge: add optional label prop for custom display text
- Layout/style polish across tabs

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

src/pages/client/ClientMyInvoices.jsx

@@ -3,6 +3,7 @@ import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Responsi
 import Layout from '../../components/Layout';
 import LoadingButton from '../../components/LoadingButton';
 import SortTh from '../../components/SortTh';
+import StatusBadge from '../../components/StatusBadge';
 import { supabase } from '../../lib/supabase';
 import { generateInvoicePDF } from '../../lib/invoice';
 import { useAuth } from '../../context/AuthContext';
@@ -137,7 +138,12 @@ export default function MyInvoices() {
                         {inv.due_date ? new Date(inv.due_date).toLocaleDateString() : '—'}
                         {isOverdue && <span style={{ marginLeft: 6, fontSize: 11 }}>Overdue</span>}
                       </td>
-                      <td><span className={`badge badge-${statusColor[inv.status]}`} style={{ textTransform: 'capitalize' }}>{inv.status}</span></td>
+                      <td>
+                        <StatusBadge
+                          status={statusColor[inv.status] || 'not_started'}
+                          label={inv.status ? inv.status.charAt(0).toUpperCase() + inv.status.slice(1) : '—'}
+                        />
+                      </td>
                       <td style={{ fontWeight: 400, color: 'var(--accent)' }}>${Number(inv.total).toFixed(2)}</td>
                       <td>
                         <LoadingButton