feat: unify all invoice popups to shared InvoiceDetailPopup shell

All invoice popup modals (team invoice, sub-invoice team, client invoice,
external sub-invoice) now share InvoiceDetailPopup + SubcontractorInvoiceDetailView.
Same overlay, header, scroll body, footer action row — just different data per role.

- New InvoiceDetailPopup component (overlay shell, header, scrollable body, footer)
- SubcontractorInvoiceDetailView: respects item._inferredType if pre-set
- ClientInvoiceModal: uses shared components, adds sortable headers
- TeamInvoiceDetailPanel embedded: uses shared components, keeps edit-dates/email/company
- TeamInvoices sub-invoice popup: uses shared components, cleans descriptions
- ExternalMyInvoices popup: uses shared components, fixes detailSort vars (was unused)

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

src/components/InvoiceDetailPopup.jsx

@@ -0,0 +1,46 @@
+import { popupOverlayStyle, popupSurfaceStyle } from '../lib/popupStyles';
+import PageLoader from './PageLoader';
+
+export default function InvoiceDetailPopup({
+  title,
+  subtitle,
+  headerRight,
+  onClose,
+  blockClose = false,
+  footerActions,
+  loading = false,
+  children,
+}) {
+  return (
+    <div style={popupOverlayStyle} onClick={() => { if (!blockClose) onClose?.(); }}>
+      <div
+        style={{ ...popupSurfaceStyle, background: 'var(--card-bg)', width: '80vw', height: '80vh', display: 'flex', flexDirection: 'column', gap: 0 }}
+        onClick={e => e.stopPropagation()}
+      >
+        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16, paddingBottom: 18, marginBottom: 18, borderBottom: '1px solid var(--border)', flexShrink: 0 }}>
+          <div>
+            <div style={{ fontSize: 18, fontWeight: 500, color: 'var(--text-primary)', letterSpacing: 0.2, lineHeight: 1.1 }}>{title}</div>
+            {subtitle && <div style={{ marginTop: 6, fontSize: 13, color: 'var(--text-secondary)' }}>{subtitle}</div>}
+          </div>
+          {headerRight && <div style={{ flexShrink: 0 }}>{headerRight}</div>}
+        </div>
+
+        {loading ? (
+          <div style={{ flex: 1, minHeight: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <PageLoader />
+          </div>
+        ) : (
+          <div className="scrollbar-thin-theme table-scroll-hidden" style={{ flex: 1, minHeight: 0, overflowY: 'auto' }}>
+            {children}
+          </div>
+        )}
+
+        {footerActions && (
+          <div className="modal-action-row" style={{ paddingTop: 18, borderTop: '1px solid var(--border)', flexShrink: 0 }}>
+            {footerActions}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/SubcontractorInvoiceDetailView.jsx

@@ -73,7 +73,7 @@ export default function SubcontractorInvoiceDetailView({
                 </thead>
                 <tbody>
                   {items.map((item) => {
-                    const itemType = inferItemType(item);
+                    const itemType = item._inferredType || inferItemType(item);
                     return (
                       <tr key={item.id}>
                         <td style={{ padding: '5px 0' }}>