reactbridge-sdk 0.2.7 → 0.2.8

package/dist/index.esm.js

@@ -2749,47 +2749,167 @@ function AnalyticsDashboard({ onDirectiveAction, className = "", showRefresh = t
                                 : "Decline"))))))))))))));
 }
 
+/**
+ * Request Cache Manager
+ * Implements a simple caching mechanism similar to react-query
+ * Prevents duplicate concurrent requests and caches results
+ */
+const DEFAULT_TTL = 5 * 60 * 1000; // 5 minutes
+class RequestCache {
+    constructor() {
+        this.cache = new Map();
+        this.pendingRequests = new Map();
+    }
+    /**
+     * Generate a cache key from function and parameters
+     */
+    getCacheKey(fetchFn, params) {
+        const fnString = fetchFn.toString();
+        const paramString = params ? JSON.stringify(params) : '';
+        return `${fnString}::${paramString}`;
+    }
+    /**
+     * Check if cache entry is still valid
+     */
+    isCacheValid(entry) {
+        return Date.now() - entry.timestamp < entry.ttl;
+    }
+    /**
+     * Fetch or return cached data
+     */
+    get(fetchFn_1, params_1) {
+        return __awaiter(this, arguments, void 0, function* (fetchFn, params, ttl = DEFAULT_TTL) {
+            const key = this.getCacheKey(fetchFn, params);
+            // Return valid cached data
+            const cached = this.cache.get(key);
+            if (cached && this.isCacheValid(cached)) {
+                return cached.data;
+            }
+            // Return pending request if already in flight
+            const pending = this.pendingRequests.get(key);
+            if (pending) {
+                return pending.promise;
+            }
+            // Create new request
+            const promise = fetchFn().then((data) => {
+                this.cache.set(key, {
+                    data,
+                    timestamp: Date.now(),
+                    ttl,
+                });
+                this.pendingRequests.delete(key);
+                return data;
+            }).catch((error) => {
+                this.pendingRequests.delete(key);
+                throw error;
+            });
+            this.pendingRequests.set(key, { promise });
+            return promise;
+        });
+    }
+    /**
+     * Invalidate cache entry
+     */
+    invalidate(fetchFn, params) {
+        const key = this.getCacheKey(fetchFn, params);
+        this.cache.delete(key);
+    }
+    /**
+     * Clear all cache
+     */
+    clear() {
+        this.cache.clear();
+        this.pendingRequests.clear();
+    }
+}
+// Singleton instance
+const requestCache = new RequestCache();
+
 /**
  * useReportData Hook
  * Fetches and manages report data with error handling
+ * Implements caching to prevent duplicate requests
  */
 /**
  * Generic hook for fetching report data
- * Automatically uses the API from ReactBridgeProvider
+ * Implements caching and deduplication to prevent infinite requests
  * @param fetchFn - Async function to fetch report data
  * @param dependencies - Dependencies that trigger refetch when changed
- * @param options - Hook options (enabled flag)
+ * @param options - Hook options (enabled flag, cache TTL)
  */
 function useReportData(fetchFn, dependencies = [], options = {}) {
-    const { api } = useReactBridgeContext();
     const [data, setData] = useState(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
-    const { enabled = true } = options;
-    const fetchData = useCallback(() => __awaiter(this, void 0, void 0, function* () {
+    const isMountedRef = useRef(true);
+    const { enabled = true, ttl = 5 * 60 * 1000 } = options;
+    // Create a stable string representation of dependencies for comparison
+    const depsString = JSON.stringify(dependencies);
+    useEffect(() => {
+        isMountedRef.current = true;
         if (!enabled) {
             setLoading(false);
             return;
         }
+        let cancelled = false;
+        const fetchData = () => __awaiter(this, void 0, void 0, function* () {
+            try {
+                setLoading(true);
+                setError(null);
+                // Use cache to avoid duplicate requests
+                const result = yield requestCache.get(fetchFn, depsString, ttl);
+                if (!cancelled && isMountedRef.current) {
+                    setData(result);
+                }
+            }
+            catch (err) {
+                if (!cancelled && isMountedRef.current) {
+                    const error = err instanceof Error ? err : new Error("Unknown error occurred");
+                    setError(error);
+                    setData(null);
+                }
+            }
+            finally {
+                if (!cancelled && isMountedRef.current) {
+                    setLoading(false);
+                }
+            }
+        });
+        fetchData();
+        return () => {
+            cancelled = true;
+        };
+    }, [depsString, enabled, ttl, fetchFn]);
+    useEffect(() => {
+        return () => {
+            isMountedRef.current = false;
+        };
+    }, []);
+    const refetch = () => __awaiter(this, void 0, void 0, function* () {
+        // Invalidate cache and refetch
+        requestCache.invalidate(fetchFn, depsString);
         try {
             setLoading(true);
             setError(null);
-            const result = yield fetchFn();
-            setData(result);
+            const result = yield requestCache.get(fetchFn, depsString, ttl);
+            if (isMountedRef.current) {
+                setData(result);
+            }
         }
         catch (err) {
-            const error = err instanceof Error ? err : new Error("Unknown error occurred");
-            setError(error);
-            setData(null);
+            if (isMountedRef.current) {
+                const error = err instanceof Error ? err : new Error("Unknown error occurred");
+                setError(error);
+                setData(null);
+            }
         }
         finally {
-            setLoading(false);
+            if (isMountedRef.current) {
+                setLoading(false);
+            }
         }
-    }), [fetchFn, enabled, api]);
-    useEffect(() => {
-        fetchData();
-    }, [fetchData, ...dependencies]);
-    return { data, loading, error, refetch: fetchData };
+    });
+    return { data, loading, error, refetch };
 }
 
 /**
@@ -2902,40 +3022,29 @@ function useDateRange(defaultOption = "past-month") {
 
 /**
  * DateRangeSelector Component
- * Button group for selecting predefined date ranges
+ * Select dropdown for date range selection
  */
 const DateRangeSelector = ({ selectedOption, onSelect, theme, }) => {
     const options = DateRangeService.getAllOptions();
-    return (React.createElement("div", { style: {
-            display: "flex",
-            gap: (theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px",
-            flexWrap: "wrap",
-        } }, options.map((option) => {
-        const isSelected = selectedOption === option.value;
-        return (React.createElement("button", { key: option.value, onClick: () => onSelect(option.value), style: {
-                padding: `${(theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px"} ${(theme === null || theme === void 0 ? void 0 : theme.spacing.sm) || "8px"}`,
-                fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.sm) || "14px",
-                fontWeight: "500",
-                borderRadius: (theme === null || theme === void 0 ? void 0 : theme.borderRadius) || "8px",
-                border: "none",
-                cursor: "pointer",
-                transition: "all 0.2s ease",
-                backgroundColor: isSelected
-                    ? (theme === null || theme === void 0 ? void 0 : theme.colors.primary) || "#1976d2"
-                    : (theme === null || theme === void 0 ? void 0 : theme.colors.surface) || "#f5f5f5",
-                color: isSelected ? "#fff" : (theme === null || theme === void 0 ? void 0 : theme.colors.text) || "#000",
-            }, onMouseEnter: (e) => {
-                if (!isSelected) {
-                    e.currentTarget.style.backgroundColor =
-                        (theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0";
-                }
-            }, onMouseLeave: (e) => {
-                if (!isSelected) {
-                    e.currentTarget.style.backgroundColor =
-                        (theme === null || theme === void 0 ? void 0 : theme.colors.surface) || "#f5f5f5";
-                }
-            } }, option.label));
-    })));
+    return (React.createElement("select", { value: selectedOption, onChange: (e) => onSelect(e.target.value), style: {
+            padding: `${(theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "6px"} ${(theme === null || theme === void 0 ? void 0 : theme.spacing.sm) || "10px"}`,
+            fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.sm) || "13px",
+            fontWeight: "500",
+            borderRadius: (theme === null || theme === void 0 ? void 0 : theme.borderRadius) || "6px",
+            border: `1px solid ${(theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#d0d0d0"}`,
+            backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.colors.surface) || "#f9f9f9",
+            color: (theme === null || theme === void 0 ? void 0 : theme.colors.text) || "#000",
+            cursor: "pointer",
+            transition: "border-color 0.2s ease, box-shadow 0.2s ease",
+        }, onFocus: (e) => {
+            e.currentTarget.style.borderColor =
+                (theme === null || theme === void 0 ? void 0 : theme.colors.primary) || "#1976d2";
+            e.currentTarget.style.boxShadow = `0 0 0 2px ${((theme === null || theme === void 0 ? void 0 : theme.colors.primary) || "#1976d2") + "20"}`;
+        }, onBlur: (e) => {
+            e.currentTarget.style.borderColor =
+                (theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#d0d0d0";
+            e.currentTarget.style.boxShadow = "none";
+        } }, options.map((option) => (React.createElement("option", { key: option.value, value: option.value }, option.label)))));
 };
 
 /**
@@ -2997,35 +3106,37 @@ const LoadingState = ({ theme, variant = "minimal", }) => {
  * ReportLayout Component
  * Wrapper for report pages with header and date range selector
  */
-const ReportLayout = ({ title, description, selectedDateRange, onDateRangeChange, loading, error, children, theme, }) => {
+const ReportLayout = ({ title, description, selectedDateRange, onDateRangeChange, loading, error, children, theme: themeProp, }) => {
+    const { theme: contextTheme } = useReactBridgeContext();
+    const theme = themeProp || contextTheme;
     return (React.createElement("div", { style: {
             display: "flex",
             flexDirection: "column",
-            gap: (theme === null || theme === void 0 ? void 0 : theme.spacing.lg) || "24px",
+            gap: (theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "12px",
         } },
         React.createElement("div", { style: {
                 display: "flex",
                 alignItems: "flex-start",
                 justifyContent: "space-between",
-                gap: (theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px",
+                gap: (theme === null || theme === void 0 ? void 0 : theme.spacing.sm) || "12px",
                 flexWrap: "wrap",
             } },
             React.createElement("div", { style: { flex: 1, minWidth: "200px" } },
                 React.createElement("h1", { style: {
                         margin: 0,
-                        fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.xl) || "24px",
+                        fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.lg) || "20px",
                         fontWeight: "700",
                         color: (theme === null || theme === void 0 ? void 0 : theme.colors.text) || "#000",
                     } }, title),
                 description && (React.createElement("p", { style: {
                         margin: `${(theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px"} 0 0 0`,
-                        fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.sm) || "14px",
+                        fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.sm) || "12px",
                         color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666",
                     } }, description))),
             React.createElement(DateRangeSelector, { selectedOption: selectedDateRange, onSelect: onDateRangeChange, theme: theme })),
         loading ? (React.createElement(LoadingState, { theme: theme })) : error ? (React.createElement("div", { style: {
-                padding: (theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px",
-                borderRadius: (theme === null || theme === void 0 ? void 0 : theme.borderRadius) || "8px",
+                padding: (theme === null || theme === void 0 ? void 0 : theme.spacing.sm) || "12px",
+                borderRadius: (theme === null || theme === void 0 ? void 0 : theme.borderRadius) || "6px",
                 backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.colors.error)
                     ? `${theme.colors.error}15`
                     : "#FEE2E2",
@@ -3033,7 +3144,7 @@ const ReportLayout = ({ title, description, selectedDateRange, onDateRangeChange
             } },
             React.createElement("p", { style: {
                     margin: 0,
-                    fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.sm) || "14px",
+                    fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.sm) || "12px",
                     color: (theme === null || theme === void 0 ? void 0 : theme.colors.error) || "#f44336",
                     fontWeight: "500",
                 } },
@@ -3063,8 +3174,8 @@ const MetricCard = ({ label, value, unit, trend, trendValue, icon, onClick, them
         return "→";
     };
     const containerStyles = {
-        padding: (theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px",
-        borderRadius: (theme === null || theme === void 0 ? void 0 : theme.borderRadius) || "8px",
+        padding: (theme === null || theme === void 0 ? void 0 : theme.spacing.sm) || "10px",
+        borderRadius: (theme === null || theme === void 0 ? void 0 : theme.borderRadius) || "6px",
         border: `1px solid ${(theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0"}`,
         backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.colors.surface) || "#f5f5f5",
         cursor: onClick ? "pointer" : "default",
@@ -3087,30 +3198,30 @@ const MetricCard = ({ label, value, unit, trend, trendValue, icon, onClick, them
             } },
             React.createElement("div", { style: { flex: 1 } },
                 React.createElement("p", { style: {
-                        fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.sm) || "14px",
+                        fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.xs) || "11px",
                         color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666",
-                        margin: "0 0 8px 0",
+                        margin: "0 0 6px 0",
                     } }, label),
                 React.createElement("div", { style: {
                         display: "flex",
                         alignItems: "baseline",
-                        gap: (theme === null || theme === void 0 ? void 0 : theme.spacing.sm) || "8px",
+                        gap: (theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px",
                     } },
                     React.createElement("p", { style: {
-                            fontSize: "24px",
+                            fontSize: "18px",
                             fontWeight: "bold",
                             color: (theme === null || theme === void 0 ? void 0 : theme.colors.text) || "#000",
                             margin: 0,
                         } }, value),
                     unit && (React.createElement("p", { style: {
-                            fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.sm) || "14px",
+                            fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.xs) || "11px",
                             color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666",
                             margin: 0,
                         } }, unit))),
                 trend && trendValue !== undefined && (React.createElement("div", { style: {
-                        fontSize: "12px",
+                        fontSize: "10px",
                         color: getTrendColor(),
-                        marginTop: "8px",
+                        marginTop: "4px",
                     } },
                     getTrendIcon(),
                     " ",
@@ -3118,7 +3229,7 @@ const MetricCard = ({ label, value, unit, trend, trendValue, icon, onClick, them
                     "%"))),
             icon && (React.createElement("div", { style: {
                     color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#999",
-                    fontSize: "24px",
+                    fontSize: "18px",
                 } }, icon)))));
 };
 
@@ -3178,9 +3289,10 @@ const TrendChart = ({ data, title, height = 200, theme, showArea = true, }) => {
  * Executive Dashboard Report
  * High-level directive execution metrics, trends, and cost impact
  */
-const ExecutiveDashboard = ({ theme, defaultDateRange = "past-month", }) => {
+const ExecutiveDashboard = ({ theme: themeProp, defaultDateRange = "past-month", }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-    const { api } = useReactBridgeContext();
+    const { api, theme: contextTheme } = useReactBridgeContext();
+    const theme = themeProp || contextTheme;
     const dateRange = useDateRange(defaultDateRange);
     const { data, loading, error } = useReportData(() => api.getExecutiveDashboard({
         startDate: dateRange.startDate,
@@ -3193,46 +3305,47 @@ const ExecutiveDashboard = ({ theme, defaultDateRange = "past-month", }) => {
     return (React.createElement(ReportLayout, { title: "Executive Dashboard", description: "High-level directive execution metrics and trends", selectedDateRange: dateRange.selectedOption, onDateRangeChange: dateRange.setSelectedOption, loading: loading, error: error, theme: theme },
         React.createElement("div", { style: {
                 display: "grid",
-                gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
-                gap: (theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px",
+                gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
+                gap: (theme === null || theme === void 0 ? void 0 : theme.spacing.sm) || "10px",
             } },
             React.createElement(MetricCard, { label: "Total Directives", value: (_b = data === null || data === void 0 ? void 0 : data.totalDirectives) !== null && _b !== void 0 ? _b : 0, theme: theme }),
             React.createElement(MetricCard, { label: "Success Rate", value: (_d = (_c = data === null || data === void 0 ? void 0 : data.successRate) === null || _c === void 0 ? void 0 : _c.toFixed(2)) !== null && _d !== void 0 ? _d : 0, unit: "%", trend: ((_e = data === null || data === void 0 ? void 0 : data.successRate) !== null && _e !== void 0 ? _e : 0 > 80) ? "up" : "neutral", theme: theme }),
             React.createElement(MetricCard, { label: "Auto-Executed", value: (_f = data === null || data === void 0 ? void 0 : data.autoExecutedDirectives) !== null && _f !== void 0 ? _f : 0, theme: theme }),
             React.createElement(MetricCard, { label: "Cost Impact", value: (_h = (_g = data === null || data === void 0 ? void 0 : data.totalCostImpact) === null || _g === void 0 ? void 0 : _g.toFixed(2)) !== null && _h !== void 0 ? _h : 0, unit: "$", theme: theme })),
         trendData.length > 0 && (React.createElement("div", { style: {
-                padding: (theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px",
+                padding: (theme === null || theme === void 0 ? void 0 : theme.spacing.sm) || "10px",
                 border: `1px solid ${(theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0"}`,
-                borderRadius: (theme === null || theme === void 0 ? void 0 : theme.borderRadius) || "8px",
+                borderRadius: (theme === null || theme === void 0 ? void 0 : theme.borderRadius) || "6px",
                 backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.colors.surface) || "#f5f5f5",
             } },
             React.createElement(TrendChart, { data: trendData, title: "Success Rate Trend", theme: theme, showArea: true }))),
         React.createElement("div", { style: {
                 display: "grid",
-                gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
-                gap: (theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px",
+                gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
+                gap: (theme === null || theme === void 0 ? void 0 : theme.spacing.sm) || "10px",
             } },
             React.createElement("div", { style: {
-                    padding: (theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px",
+                    padding: (theme === null || theme === void 0 ? void 0 : theme.spacing.sm) || "10px",
                     border: `1px solid ${(theme === null || theme === void 0 ? void 0 : theme.colors.border) || "#e0e0e0"}`,
-                    borderRadius: (theme === null || theme === void 0 ? void 0 : theme.borderRadius) || "8px",
+                    borderRadius: (theme === null || theme === void 0 ? void 0 : theme.borderRadius) || "6px",
                     backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.colors.surface) || "#f5f5f5",
                 } },
                 React.createElement("h3", { style: {
-                        margin: `0 0 ${(theme === null || theme === void 0 ? void 0 : theme.spacing.md) || "16px"} 0`,
-                        fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.md) || "16px",
+                        margin: `0 0 ${(theme === null || theme === void 0 ? void 0 : theme.spacing.sm) || "8px"} 0`,
+                        fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.sm) || "13px",
                         fontWeight: "600",
                         color: (theme === null || theme === void 0 ? void 0 : theme.colors.text) || "#000",
                     } }, "Execution Summary"),
                 React.createElement("div", { style: {
                         display: "flex",
                         flexDirection: "column",
-                        gap: (theme === null || theme === void 0 ? void 0 : theme.spacing.sm) || "8px",
+                        gap: (theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px",
                     } },
                     React.createElement("div", { style: {
                             display: "flex",
                             justifyContent: "space-between",
-                            padding: `${(theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px"} 0`,
+                            padding: `${(theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "3px"} 0`,
+                            fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.xs) || "11px",
                         } },
                         React.createElement("span", { style: { color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666" } }, "Successful:"),
                         React.createElement("span", { style: {
@@ -3242,7 +3355,8 @@ const ExecutiveDashboard = ({ theme, defaultDateRange = "past-month", }) => {
                     React.createElement("div", { style: {
                             display: "flex",
                             justifyContent: "space-between",
-                            padding: `${(theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px"} 0`,
+                            padding: `${(theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "3px"} 0`,
+                            fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.xs) || "11px",
                         } },
                         React.createElement("span", { style: { color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666" } }, "Failed:"),
                         React.createElement("span", { style: {
@@ -3252,7 +3366,8 @@ const ExecutiveDashboard = ({ theme, defaultDateRange = "past-month", }) => {
                     React.createElement("div", { style: {
                             display: "flex",
                             justifyContent: "space-between",
-                            padding: `${(theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "4px"} 0`,
+                            padding: `${(theme === null || theme === void 0 ? void 0 : theme.spacing.xs) || "3px"} 0`,
+                            fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizes.xs) || "11px",
                         } },
                         React.createElement("span", { style: { color: (theme === null || theme === void 0 ? void 0 : theme.colors.textSecondary) || "#666" } }, "Avg Cost:"),
                         React.createElement("span", { style: {
@@ -3491,9 +3606,10 @@ DataTable.displayName = "DataTable";
  * Supply Chain Risk Report
  * Supply chain risks including inventory, supplier, and cost analysis
  */
-const SupplyChainRisk = ({ theme, defaultDateRange = "past-month", }) => {
+const SupplyChainRisk = ({ theme: themeProp, defaultDateRange = "past-month", }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
-    const { api } = useReactBridgeContext();
+    const { api, theme: contextTheme } = useReactBridgeContext();
+    const theme = themeProp || contextTheme;
     const dateRange = useDateRange(defaultDateRange);
     const { data, loading, error } = useReportData(() => api.getSupplyChainRisk({
         startDate: dateRange.startDate,
@@ -3752,9 +3868,10 @@ const StatusBadge = ({ status, label, theme, }) => {
  * Execution Audit Trail Report
  * Complete execution history and audit information
  */
-const ExecutionAuditTrail = ({ theme, defaultDateRange = "past-month", }) => {
+const ExecutionAuditTrail = ({ theme: themeProp, defaultDateRange = "past-month", }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-    const { api } = useReactBridgeContext();
+    const { api, theme: contextTheme } = useReactBridgeContext();
+    const theme = themeProp || contextTheme;
     const dateRange = useDateRange(defaultDateRange);
     const [directiveTypeFilter, setDirectiveTypeFilter] = useState("");
     const { data, loading, error } = useReportData(() => api.getExecutionAuditTrail({
@@ -3949,9 +4066,10 @@ const HealthGauge = ({ score, label, size = "medium", theme, }) => {
  * Portfolio Health Report
  * Aggregated metric health across the entire portfolio
  */
-const PortfolioHealth = ({ theme, defaultDateRange = "past-month", }) => {
+const PortfolioHealth = ({ theme: themeProp, defaultDateRange = "past-month", }) => {
     var _a, _b, _c, _d;
-    const { api } = useReactBridgeContext();
+    const { api, theme: contextTheme } = useReactBridgeContext();
+    const theme = themeProp || contextTheme;
     const dateRange = useDateRange(defaultDateRange);
     const { data, loading, error } = useReportData(() => api.getPortfolioHealth({
         startDate: dateRange.startDate,
@@ -4103,9 +4221,10 @@ const PortfolioHealth = ({ theme, defaultDateRange = "past-month", }) => {
  * Data Quality & Automation Report
  * Data gaps, automation opportunities, and actionable recommendations
  */
-const DataQualityAutomation = ({ theme, defaultDateRange = "past-month", }) => {
+const DataQualityAutomation = ({ theme: themeProp, defaultDateRange = "past-month", }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-    const { api } = useReactBridgeContext();
+    const { api, theme: contextTheme } = useReactBridgeContext();
+    const theme = themeProp || contextTheme;
     const dateRange = useDateRange(defaultDateRange);
     const { data, loading, error } = useReportData(() => api.getDataQualityAutomation({
         startDate: dateRange.startDate,