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/team/TeamSubInvoiceDetail.jsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import Layout from '../../components/Layout';
 import SortTh from '../../components/SortTh';
+import StatusBadge from '../../components/StatusBadge';
 import { supabase } from '../../lib/supabase';
 import { generateSubcontractorPOPDF } from '../../lib/invoice';
 import { blobToEmailAttachment, sendEmail } from '../../lib/email';
@@ -121,9 +122,10 @@ export default function SubInvoiceDetail() {
             {invoice.profile?.name || 'External'} · {invoice.profile?.email || '—'}
           </div>
         </div>
-        <span className={`badge badge-${statusColor[invoice.status] || 'not_started'}`} style={{ fontSize: 13, padding: '6px 14px', textTransform: 'capitalize' }}>
-          {invoice.status}
-        </span>
+        <StatusBadge
+          status={statusColor[invoice.status] || 'not_started'}
+          label={invoice.status ? invoice.status.charAt(0).toUpperCase() + invoice.status.slice(1) : '—'}
+        />
       </div>
 
       <div className="grid-2" style={{ marginBottom: 24 }}>