reactbridge-sdk 0.2.1 → 0.2.2

package/dist/index.js

@@ -2153,7 +2153,180 @@ const AnalyticsWidget = ({ position = 'bottom-right', theme: customTheme, onDire
         isOpen && (React.createElement(AnalyticsDrawer, { isOpen: isOpen, onClose: () => setIsOpen(false), configs: configs, isLoading: isLoading, theme: theme, onDirectiveAction: onDirectiveAction }))));
 };
 
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".analytics-dashboard{background:var(--rb-color-background,#fff);border:1px solid var(--rb-color-border,#e5e7eb);border-radius:8px;font-family:var(--rb-font-family,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif);min-height:600px;overflow:hidden;width:100%}.analytics-dashboard-header{align-items:center;background:var(--rb-color-surface,#fff);border-bottom:1px solid var(--rb-color-border,#e5e7eb);display:flex;justify-content:space-between;padding:24px}.analytics-dashboard-title{color:var(--rb-color-text,#111827);font-size:24px;font-weight:700;margin:0}.analytics-dashboard-subtitle{color:var(--rb-color-text-secondary,#6b7280);font-size:14px;margin:4px 0 0}.analytics-dashboard-refresh-btn{align-items:center;background:var(--rb-color-primary,#3b82f6);border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;font-size:14px;font-weight:500;gap:8px;padding:8px 16px;transition:all .2s}.analytics-dashboard-refresh-btn:hover:not(:disabled){background:var(--rb-color-primary-dark,#2563eb);transform:translateY(-1px)}.analytics-dashboard-refresh-btn:disabled{cursor:not-allowed;opacity:.5}.analytics-dashboard-refresh-btn svg{animation:none}.analytics-dashboard-refresh-btn:disabled svg{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.analytics-dashboard-content{display:flex;min-height:600px}.analytics-dashboard-sidebar{background:var(--rb-color-surface,#fafafa);border-right:1px solid var(--rb-color-border,#e5e7eb);overflow-y:auto;width:320px}.analytics-sidebar-title{color:var(--rb-color-text-secondary,#6b7280);font-size:12px;font-weight:700;letter-spacing:.05em;margin:0;padding:16px 16px 8px;text-transform:uppercase}.analytics-list{padding:8px}.analytics-list-item{background:var(--rb-color-background,#fff);border:1px solid var(--rb-color-border,#e5e7eb);border-radius:6px;cursor:pointer;margin-bottom:4px;padding:12px;text-align:left;transition:all .2s;width:100%}.analytics-list-item:hover:not(.disabled){border-color:var(--rb-color-primary,#3b82f6);box-shadow:0 2px 4px rgba(0,0,0,.05)}.analytics-list-item.active{background:var(--rb-color-primary,#3b82f6);border-color:var(--rb-color-primary,#3b82f6);color:#fff}.analytics-list-item.disabled{cursor:not-allowed;opacity:.5}.analytics-list-item-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:4px}.analytics-list-item-name{font-size:14px;font-weight:600}.analytics-list-item.active .analytics-list-item-name{color:#fff}.analytics-list-item-badge{background:var(--rb-color-error,#ef4444);border-radius:4px;color:#fff;font-size:10px;font-weight:600;padding:2px 6px;text-transform:uppercase}.analytics-list-item-description{color:var(--rb-color-text-secondary,#6b7280);font-size:12px;line-height:1.4;margin:0 0 8px}.analytics-list-item.active .analytics-list-item-description{color:hsla(0,0%,100%,.9)}.analytics-list-item-meta{align-items:center;color:var(--rb-color-text-secondary,#9ca3af);display:flex;font-size:11px;justify-content:space-between}.analytics-list-item.active .analytics-list-item-meta{color:hsla(0,0%,100%,.8)}.analytics-list-item-frequency{font-weight:500;text-transform:capitalize}.analytics-dashboard-main{background:var(--rb-color-background,#fff);flex:1;overflow-y:auto;padding:24px}.analytics-dashboard-empty,.analytics-dashboard-loading,.analytics-dashboard-no-results,.analytics-dashboard-placeholder{align-items:center;color:var(--rb-color-text-secondary,#9ca3af);display:flex;flex-direction:column;justify-content:center;min-height:400px;text-align:center}.analytics-dashboard-empty svg,.analytics-dashboard-loading svg,.analytics-dashboard-no-results svg,.analytics-dashboard-placeholder svg{margin-bottom:16px;opacity:.3}.analytics-dashboard-empty p,.analytics-dashboard-no-results p,.analytics-dashboard-placeholder p{font-size:14px;margin:0}.analytics-dashboard-no-results h3{color:var(--rb-color-text,#111827);font-size:18px;font-weight:600;margin:0 0 8px}.analytics-spinner{animation:spin 1s linear infinite;border:4px solid var(--rb-color-border,#e5e7eb);border-radius:50%;border-top-color:var(--rb-color-primary,#3b82f6);height:40px;margin-bottom:16px;width:40px}.analytics-result-detail{animation:fadeIn .3s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.analytics-result-header{border-bottom:1px solid var(--rb-color-border,#e5e7eb);margin-bottom:24px;padding-bottom:16px}.analytics-result-title{color:var(--rb-color-text,#111827);font-size:20px;font-weight:700;margin:0 0 4px}.analytics-result-date{color:var(--rb-color-text-secondary,#6b7280);font-size:13px;margin:0}.analytics-section{margin-bottom:32px}.analytics-section-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px}.analytics-section-title{color:var(--rb-color-text,#111827);font-size:16px;font-weight:700;margin:0 0 16px}.analytics-metrics-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.analytics-metric-card{background:var(--rb-color-surface,#fafafa);border:1px solid var(--rb-color-border,#e5e7eb);border-left-width:4px;border-radius:8px;padding:16px}.analytics-metric-card.status-ok{border-left-color:var(--rb-color-success,#10b981)}.analytics-metric-card.status-warning{border-left-color:#f59e0b}.analytics-metric-card.status-critical{border-left-color:var(--rb-color-error,#ef4444)}.analytics-metric-header{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:8px}.analytics-metric-name{color:var(--rb-color-text,#111827);font-size:13px;font-weight:600}.analytics-metric-status{border-radius:4px;font-size:10px;font-weight:700;padding:2px 6px;text-transform:uppercase}.analytics-metric-status.status-ok{background:#d1fae5;color:#065f46}.analytics-metric-status.status-warning{background:#fef3c7;color:#92400e}.analytics-metric-status.status-critical{background:#fee2e2;color:#991b1b}.analytics-metric-value{color:var(--rb-color-text,#111827);font-size:24px;font-weight:700;margin-bottom:4px}.analytics-metric-explanation{color:var(--rb-color-text-secondary,#6b7280);font-size:12px;line-height:1.4;margin:0}.analytics-observations-list{display:flex;flex-direction:column;gap:12px}.analytics-observation{background:var(--rb-color-surface,#fafafa);border:1px solid var(--rb-color-border,#e5e7eb);border-left-width:4px;border-radius:8px;padding:16px}.analytics-observation.severity-low{border-left-color:#3b82f6}.analytics-observation.severity-medium{border-left-color:#f59e0b}.analytics-observation.severity-high{border-left-color:var(--rb-color-error,#ef4444)}.analytics-observation-header{display:flex;gap:8px;margin-bottom:8px}.analytics-observation-severity{border-radius:4px;font-size:10px;font-weight:700;padding:2px 6px;text-transform:uppercase}.analytics-observation-severity.severity-low{background:#dbeafe;color:#1e40af}.analytics-observation-severity.severity-medium{background:#fef3c7;color:#92400e}.analytics-observation-severity.severity-high{background:#fee2e2;color:#991b1b}.analytics-observation-scope{color:var(--rb-color-text-secondary,#9ca3af);font-size:11px;text-transform:capitalize}.analytics-observation-text{color:var(--rb-color-text,#111827);font-size:14px;line-height:1.5;margin:0}.analytics-directive-filters{display:flex;gap:8px}.analytics-filter-btn{background:var(--rb-color-surface,#fafafa);border:1px solid var(--rb-color-border,#e5e7eb);border-radius:6px;color:var(--rb-color-text,#111827);cursor:pointer;font-size:12px;font-weight:500;padding:6px 12px;transition:all .2s}.analytics-filter-btn.active,.analytics-filter-btn:hover{border-color:var(--rb-color-primary,#3b82f6)}.analytics-filter-btn.active{background:var(--rb-color-primary,#3b82f6);color:#fff}.analytics-directives-list{display:flex;flex-direction:column;gap:16px}.analytics-directives-empty{color:var(--rb-color-text-secondary,#9ca3af);font-size:14px;padding:32px;text-align:center}.analytics-directive-card{background:var(--rb-color-surface,#fafafa);border:1px solid var(--rb-color-border,#e5e7eb);border-left-width:4px;border-radius:8px;padding:20px}.analytics-directive-card.priority-high{border-left-color:var(--rb-color-error,#ef4444)}.analytics-directive-card.priority-medium{border-left-color:#f59e0b}.analytics-directive-card.priority-low{border-left-color:#3b82f6}.analytics-directive-header{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:12px}.analytics-directive-priority{border-radius:4px;font-size:10px;font-weight:700;margin-right:8px;padding:3px 8px;text-transform:uppercase}.analytics-directive-priority.priority-high{background:#fee2e2;color:#991b1b}.analytics-directive-priority.priority-medium{background:#fef3c7;color:#92400e}.analytics-directive-priority.priority-low{background:#dbeafe;color:#1e40af}.analytics-directive-action{color:var(--rb-color-text,#111827);font-family:monospace;font-size:14px;font-weight:600}.analytics-directive-status{border-radius:4px;font-size:11px;font-weight:600;padding:4px 8px;text-transform:capitalize}.analytics-directive-status.status-pending{background:#fef3c7;color:#92400e}.analytics-directive-status.status-executed{background:#d1fae5;color:#065f46}.analytics-directive-status.status-declined{background:#f3f4f6;color:#4b5563}.analytics-directive-status.status-failed{background:#fee2e2;color:#991b1b}.analytics-directive-rationale{color:var(--rb-color-text,#374151);font-size:14px;line-height:1.5;margin:0 0 12px}.analytics-directive-parameters{background:var(--rb-color-background,#fff);border:1px solid var(--rb-color-border,#e5e7eb);border-radius:6px;margin-bottom:16px;padding:12px}.analytics-directive-parameters-label{color:var(--rb-color-text-secondary,#6b7280);display:block;font-size:11px;font-weight:600;margin-bottom:8px;text-transform:uppercase}.analytics-directive-parameters-list{display:flex;flex-wrap:wrap;gap:8px}.analytics-directive-parameter{color:var(--rb-color-text-secondary,#6b7280);font-family:monospace;font-size:12px}.analytics-directive-parameter strong{color:var(--rb-color-text,#111827)}.analytics-directive-actions{display:flex;gap:12px}.analytics-directive-btn{border:none;border-radius:6px;cursor:pointer;flex:1;font-size:14px;font-weight:600;padding:10px 20px;transition:all .2s}.analytics-directive-btn.execute{background:var(--rb-color-success,#10b981);color:#fff}.analytics-directive-btn.execute:hover:not(:disabled){background:#059669;box-shadow:0 4px 6px rgba(16,185,129,.2);transform:translateY(-1px)}.analytics-directive-btn.decline{background:var(--rb-color-surface,#f3f4f6);border:1px solid var(--rb-color-border,#e5e7eb);color:var(--rb-color-text,#374151)}.analytics-directive-btn.decline:hover:not(:disabled){background:#e5e7eb}.analytics-directive-btn:disabled{cursor:not-allowed;opacity:.5}@media (max-width:768px){.analytics-dashboard-content{flex-direction:column}.analytics-dashboard-sidebar{border-bottom:1px solid var(--rb-color-border,#e5e7eb);border-right:none;max-height:300px;width:100%}.analytics-metrics-grid{grid-template-columns:1fr}.analytics-directive-actions{flex-direction:column}}";
+styleInject(css_248z,{"insertAt":"top"});
+
+function AnalyticsDashboard({ onDirectiveAction, className = '', showRefresh = true, autoRefreshInterval = 0, }) {
+    const [selectedAnalytics, setSelectedAnalytics] = React.useState(null);
+    const [directiveFilter, setDirectiveFilter] = React.useState('all');
+    // Fetch analytics configurations
+    const { configs, isLoading: configsLoading, error: configsError, refetch: refetchConfigs, } = useAnalyticsConfigs();
+    // Fetch latest result for selected analytics
+    const { result, isLoading: resultLoading, error: resultError, refetch: refetchResult, } = useAnalyticsResult(selectedAnalytics);
+    // Handle directive actions
+    const { handleAction, isProcessing } = useDirectiveAction(onDirectiveAction);
+    // Auto-select first analytics if none selected
+    React.useEffect(() => {
+        if (configs && configs.length > 0 && !selectedAnalytics) {
+            setSelectedAnalytics(configs[0].analyticsType);
+        }
+    }, [configs, selectedAnalytics]);
+    // Auto-refresh
+    React.useEffect(() => {
+        if (autoRefreshInterval > 0) {
+            const interval = setInterval(() => {
+                refetchConfigs();
+                if (selectedAnalytics) {
+                    refetchResult();
+                }
+            }, autoRefreshInterval * 1000);
+            return () => clearInterval(interval);
+        }
+    }, [autoRefreshInterval, selectedAnalytics, refetchConfigs, refetchResult]);
+    const handleRefresh = () => {
+        refetchConfigs();
+        if (selectedAnalytics) {
+            refetchResult();
+        }
+    };
+    const handleDirectiveAction = (directive, action) => __awaiter(this, void 0, void 0, function* () {
+        yield handleAction(directive, action);
+        // Refetch result to get updated directive statuses
+        refetchResult();
+    });
+    const filteredDirectives = (result === null || result === void 0 ? void 0 : result.directives.filter(d => {
+        if (directiveFilter === 'all')
+            return true;
+        return d.status === directiveFilter;
+    })) || [];
+    const selectedConfig = configs === null || configs === void 0 ? void 0 : configs.find(c => c.analyticsType === selectedAnalytics);
+    return (React.createElement("div", { className: `rb-analytics-dashboard ${className}` },
+        React.createElement("div", { className: "rb-analytics-sidebar" },
+            React.createElement("div", { className: "rb-analytics-sidebar-header" },
+                React.createElement("h3", null, "Analytics"),
+                showRefresh && (React.createElement("button", { onClick: handleRefresh, disabled: configsLoading, className: "rb-analytics-refresh-btn", title: "Refresh" }, "\u21BB"))),
+            configsLoading && (React.createElement("div", { className: "rb-analytics-loading" }, "Loading analytics...")),
+            configsError && (React.createElement("div", { className: "rb-analytics-error" },
+                "Error loading analytics: ",
+                configsError.message)),
+            configs && configs.length === 0 && (React.createElement("div", { className: "rb-analytics-empty" }, "No analytics configured. Please configure analytics in your DirectivSys dashboard.")),
+            configs && configs.length > 0 && (React.createElement("div", { className: "rb-analytics-list" }, configs.map((config) => (React.createElement("button", { key: config.configId, onClick: () => setSelectedAnalytics(config.analyticsType), className: `rb-analytics-item ${selectedAnalytics === config.analyticsType ? 'active' : ''} ${!config.isEnabled ? 'disabled' : ''}` },
+                React.createElement("div", { className: "rb-analytics-item-header" },
+                    React.createElement("span", { className: "rb-analytics-item-name" }, config.analyticsType),
+                    !config.isEnabled && (React.createElement("span", { className: "rb-analytics-item-badge disabled" }, "Disabled"))),
+                React.createElement("div", { className: "rb-analytics-item-description" }, config.templateDescription),
+                React.createElement("div", { className: "rb-analytics-item-footer" },
+                    React.createElement("span", { className: "rb-analytics-item-frequency" }, config.frequency),
+                    config.lastExecutedAt && (React.createElement("span", { className: "rb-analytics-item-date" },
+                        "Last: ",
+                        new Date(config.lastExecutedAt).toLocaleDateString()))))))))),
+        React.createElement("div", { className: "rb-analytics-main" },
+            !selectedAnalytics && (React.createElement("div", { className: "rb-analytics-empty-state" },
+                React.createElement("h3", null, "No Analytics Selected"),
+                React.createElement("p", null, "Select an analytics type from the sidebar to view results."))),
+            selectedAnalytics && resultLoading && (React.createElement("div", { className: "rb-analytics-loading" }, "Loading results...")),
+            selectedAnalytics && resultError && (React.createElement("div", { className: "rb-analytics-error" },
+                "Error loading results: ",
+                resultError.message)),
+            selectedAnalytics && !resultLoading && !result && (React.createElement("div", { className: "rb-analytics-empty-state" },
+                React.createElement("h3", null, "No Results Available"),
+                React.createElement("p", null, "This analytics has not been executed yet. Results will appear here once the first run completes."))),
+            selectedAnalytics && result && (React.createElement("div", { className: "rb-analytics-content" },
+                React.createElement("div", { className: "rb-analytics-content-header" },
+                    React.createElement("div", null,
+                        React.createElement("h2", null, selectedConfig === null || selectedConfig === void 0 ? void 0 : selectedConfig.analyticsType),
+                        React.createElement("p", { className: "rb-analytics-content-date" },
+                            "Generated: ",
+                            new Date(result.createdAt).toLocaleString()))),
+                result.metrics && result.metrics.length > 0 && (React.createElement("div", { className: "rb-analytics-section" },
+                    React.createElement("h3", { className: "rb-analytics-section-title" }, "Metrics"),
+                    React.createElement("div", { className: "rb-analytics-metrics-grid" }, result.metrics.map((metric, index) => (React.createElement("div", { key: index, className: `rb-analytics-metric-card status-${metric.status}` },
+                        React.createElement("div", { className: "rb-analytics-metric-header" },
+                            React.createElement("span", { className: "rb-analytics-metric-name" }, metric.name),
+                            React.createElement("span", { className: `rb-analytics-metric-status ${metric.status}` }, metric.status)),
+                        React.createElement("div", { className: "rb-analytics-metric-value" },
+                            metric.value,
+                            " ",
+                            metric.unit),
+                        React.createElement("div", { className: "rb-analytics-metric-explanation" }, metric.explanation))))))),
+                result.observations && result.observations.length > 0 && (React.createElement("div", { className: "rb-analytics-section" },
+                    React.createElement("h3", { className: "rb-analytics-section-title" }, "Observations"),
+                    React.createElement("div", { className: "rb-analytics-observations-list" }, result.observations.map((observation, index) => (React.createElement("div", { key: index, className: `rb-analytics-observation severity-${observation.severity}` },
+                        React.createElement("div", { className: "rb-analytics-observation-header" },
+                            React.createElement("span", { className: `rb-analytics-observation-severity ${observation.severity}` }, observation.severity),
+                            React.createElement("span", { className: "rb-analytics-observation-scope" }, observation.scope)),
+                        React.createElement("div", { className: "rb-analytics-observation-text" }, observation.text))))))),
+                result.directives && result.directives.length > 0 && (React.createElement("div", { className: "rb-analytics-section" },
+                    React.createElement("div", { className: "rb-analytics-directives-header" },
+                        React.createElement("h3", { className: "rb-analytics-section-title" }, "Recommended Actions"),
+                        React.createElement("div", { className: "rb-analytics-directive-filters" },
+                            React.createElement("button", { onClick: () => setDirectiveFilter('all'), className: directiveFilter === 'all' ? 'active' : '' },
+                                "All (",
+                                result.directives.length,
+                                ")"),
+                            React.createElement("button", { onClick: () => setDirectiveFilter('proposed'), className: directiveFilter === 'proposed' ? 'active' : '' },
+                                "Proposed (",
+                                result.directives.filter(d => d.status === 'proposed').length,
+                                ")"),
+                            React.createElement("button", { onClick: () => setDirectiveFilter('executed'), className: directiveFilter === 'executed' ? 'active' : '' },
+                                "Executed (",
+                                result.directives.filter(d => d.status === 'executed').length,
+                                ")"),
+                            React.createElement("button", { onClick: () => setDirectiveFilter('declined'), className: directiveFilter === 'declined' ? 'active' : '' },
+                                "Declined (",
+                                result.directives.filter(d => d.status === 'declined').length,
+                                ")"))),
+                    filteredDirectives.length === 0 && (React.createElement("div", { className: "rb-analytics-empty-state" },
+                        React.createElement("p", null, "No directives match the selected filter."))),
+                    React.createElement("div", { className: "rb-analytics-directives-list" }, filteredDirectives.map((directive) => (React.createElement("div", { key: directive.directiveId, className: `rb-analytics-directive status-${directive.status}` },
+                        React.createElement("div", { className: "rb-analytics-directive-header" },
+                            React.createElement("div", null,
+                                React.createElement("span", { className: "rb-analytics-directive-action" }, directive.action),
+                                React.createElement("span", { className: `rb-analytics-directive-priority priority-${directive.priority}` },
+                                    "Priority: ",
+                                    directive.priority)),
+                            React.createElement("span", { className: `rb-analytics-directive-status ${directive.status}` }, directive.status)),
+                        React.createElement("div", { className: "rb-analytics-directive-rationale" }, directive.rationale),
+                        directive.parameters && directive.parameters.length > 0 && (React.createElement("div", { className: "rb-analytics-directive-parameters" },
+                            React.createElement("strong", null, "Parameters:"),
+                            React.createElement("ul", null, directive.parameters.map((param, index) => (React.createElement("li", { key: index },
+                                React.createElement("code", null, param.name),
+                                ": ",
+                                param.value)))))),
+                        directive.status === 'proposed' && (React.createElement("div", { className: "rb-analytics-directive-actions" },
+                            React.createElement("button", { onClick: () => handleDirectiveAction(directive, 'execute'), disabled: isProcessing, className: "rb-analytics-directive-btn execute" }, isProcessing ? 'Processing...' : 'Execute'),
+                            React.createElement("button", { onClick: () => handleDirectiveAction(directive, 'decline'), disabled: isProcessing, className: "rb-analytics-directive-btn decline" }, "Decline"))))))))))))));
+}
+
 exports.AnalyticsAPI = AnalyticsAPI;
+exports.AnalyticsDashboard = AnalyticsDashboard;
 exports.AnalyticsReport = AnalyticsReport;
 exports.AnalyticsWidget = AnalyticsWidget;
 exports.DirectivesPanel = DirectivesPanel;