fix: resolve black screen caused by React hooks violation in WaterfallModal

Move useMemo before early return in WaterfallModal to comply with Rules of Hooks.
Wrap App with ErrorBoundary so future render crashes show an error panel instead of a silent black screen.

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

components/mkt/WaterfallModal.tsx

@@ -11,13 +11,12 @@ interface WaterfallModalProps {
 }
 
 export const WaterfallModal: React.FC<WaterfallModalProps> = ({ product, includeCOGS, onClose }) => {
-  if (!product) return null;
-
   const data = useMemo(() => {
+    if (!product) return [];
     const metrics = calculateProductMetrics(product, includeCOGS);
-    
+
     let currentTotal = product.grossSales;
-    
+
     const steps = [
       { name: 'Gross Sales', value: product.grossSales, isTotal: true, color: '#6366f1' }, // Indigo
       { name: 'PPC', value: -product.ppcSpend, isTotal: false, color: '#ef4444' }, // Rose
@@ -67,6 +66,8 @@ export const WaterfallModal: React.FC<WaterfallModalProps> = ({ product, include
     }));
   }, [product, includeCOGS]);
 
+  if (!product) return null;
+
   const metrics = calculateProductMetrics(product, includeCOGS);
 
   return (

index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
+import ErrorBoundary from './components/ErrorBoundary';
 
 const rootElement = document.getElementById('root');
 if (!rootElement) {
@@ -10,6 +11,8 @@ if (!rootElement) {
 const root = ReactDOM.createRoot(rootElement);
 root.render(
   <React.StrictMode>
-    <App />
+    <ErrorBoundary>
+      <App />
+    </ErrorBoundary>
   </React.StrictMode>
 );