reactbridge-sdk 0.2.1 → 0.2.3

package/dist/index.js

@@ -2153,7 +2153,288 @@ 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 AnalyticsDashboard({ onDirectiveAction, className = '', showRefresh = true, autoRefreshInterval = 0, theme: customTheme, }) {
+    const { theme: contextTheme } = useReactBridgeContext();
+    const theme = customTheme || contextTheme;
+    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);
+    const proposedCount = (result === null || result === void 0 ? void 0 : result.directives.filter(d => d.status === 'proposed').length) || 0;
+    const executedCount = (result === null || result === void 0 ? void 0 : result.directives.filter(d => d.status === 'executed').length) || 0;
+    const declinedCount = (result === null || result === void 0 ? void 0 : result.directives.filter(d => d.status === 'declined').length) || 0;
+    const containerStyle = {
+        display: 'flex',
+        gap: theme.spacing.lg,
+        width: '100%',
+        minHeight: '540px',
+        backgroundColor: theme.colors.background,
+        color: theme.colors.text,
+        border: `1px solid ${theme.colors.border}`,
+        borderRadius: theme.borderRadius,
+        boxShadow: theme.boxShadow,
+        padding: theme.spacing.lg,
+    };
+    const sidebarStyle = {
+        width: '320px',
+        borderRight: `1px solid ${theme.colors.border}`,
+        paddingRight: theme.spacing.lg,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: theme.spacing.sm,
+    };
+    const listItemStyle = (isActive, isDisabled) => ({
+        width: '100%',
+        textAlign: 'left',
+        padding: theme.spacing.md,
+        backgroundColor: isActive ? theme.colors.primary : theme.colors.surface,
+        color: isActive ? '#fff' : theme.colors.text,
+        border: `1px solid ${isActive ? theme.colors.primary : theme.colors.border}`,
+        borderRadius: theme.borderRadius,
+        cursor: isDisabled ? 'not-allowed' : 'pointer',
+        opacity: isDisabled ? 0.6 : 1,
+        transition: 'transform 0.15s ease, box-shadow 0.15s ease',
+        boxShadow: isActive ? theme.boxShadow : 'none',
+    });
+    const pillStyle = (bg) => ({
+        fontSize: theme.fontSizes.xs,
+        padding: '2px 8px',
+        borderRadius: '999px',
+        backgroundColor: bg,
+        color: '#fff',
+        fontWeight: 600,
+    });
+    const placeholderStyle = {
+        flex: 1,
+        minHeight: '420px',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: theme.spacing.sm,
+        color: theme.colors.textSecondary,
+        textAlign: 'center',
+    };
+    const cardStyle = {
+        backgroundColor: theme.colors.surface,
+        border: `1px solid ${theme.colors.border}`,
+        borderRadius: theme.borderRadius,
+        padding: theme.spacing.md,
+    };
+    const statusBadgeStyle = (status) => {
+        const colors = {
+            proposed: { bg: theme.colors.primary, text: '#fff' },
+            executed: { bg: theme.colors.success, text: '#fff' },
+            declined: { bg: theme.colors.error, text: '#fff' },
+            ok: { bg: '#d1fae5', text: '#065f46' },
+            warning: { bg: '#fef3c7', text: '#92400e' },
+            critical: { bg: '#fee2e2', text: '#991b1b' },
+            high: { bg: '#fee2e2', text: '#991b1b' },
+            medium: { bg: '#fef3c7', text: '#92400e' },
+            low: { bg: '#e0ecff', text: '#1e3a8a' },
+        };
+        const palette = colors[status] || { bg: theme.colors.surface, text: theme.colors.text };
+        return {
+            fontSize: theme.fontSizes.xs,
+            padding: '2px 8px',
+            borderRadius: '999px',
+            backgroundColor: palette.bg,
+            color: palette.text,
+            fontWeight: 700,
+            textTransform: 'capitalize',
+        };
+    };
+    const directiveCardStyle = (status) => (Object.assign(Object.assign({}, cardStyle), { borderLeft: `4px solid ${status === 'executed'
+            ? theme.colors.success
+            : status === 'declined'
+                ? theme.colors.error
+                : theme.colors.primary}`, display: 'flex', flexDirection: 'column', gap: theme.spacing.sm }));
+    return (React.createElement("div", { className: className, style: containerStyle },
+        React.createElement("div", { style: sidebarStyle },
+            React.createElement("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
+                React.createElement("h3", { style: { margin: 0, fontSize: theme.fontSizes.lg } }, "Analytics"),
+                showRefresh && (React.createElement("button", { type: "button", onClick: handleRefresh, disabled: configsLoading, style: {
+                        border: `1px solid ${theme.colors.border}`,
+                        backgroundColor: theme.colors.surface,
+                        color: theme.colors.text,
+                        padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
+                        borderRadius: theme.borderRadius,
+                        cursor: configsLoading ? 'not-allowed' : 'pointer',
+                    } }, configsLoading ? 'Refreshing...' : 'Refresh'))),
+            configsLoading && (React.createElement("div", { style: placeholderStyle }, "Loading analytics...")),
+            configsError && (React.createElement("div", { style: placeholderStyle },
+                "Error loading analytics: ",
+                configsError.message)),
+            configs && configs.length === 0 && (React.createElement("div", { style: placeholderStyle }, "No analytics configured. Configure analytics in your DirectivSys dashboard.")),
+            configs && configs.length > 0 && (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.spacing.sm } }, configs.map((config) => {
+                const isActive = selectedAnalytics === config.analyticsType;
+                return (React.createElement("button", { key: config.configId, type: "button", onClick: () => config.isEnabled && setSelectedAnalytics(config.analyticsType), style: listItemStyle(isActive, !config.isEnabled), disabled: !config.isEnabled },
+                    React.createElement("div", { style: {
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            alignItems: 'center',
+                            marginBottom: theme.spacing.xs,
+                            width: '100%',
+                        } },
+                        React.createElement("span", { style: { fontSize: theme.fontSizes.md, fontWeight: 600 } }, config.analyticsType),
+                        !config.isEnabled && React.createElement("span", { style: pillStyle(theme.colors.textSecondary) }, "Disabled")),
+                    React.createElement("div", { style: {
+                            fontSize: theme.fontSizes.sm,
+                            color: isActive ? 'rgba(255,255,255,0.9)' : theme.colors.textSecondary,
+                            marginBottom: theme.spacing.xs,
+                        } }, config.templateDescription),
+                    React.createElement("div", { style: {
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            width: '100%',
+                            fontSize: theme.fontSizes.xs,
+                            color: isActive ? 'rgba(255,255,255,0.8)' : theme.colors.textSecondary,
+                        } },
+                        React.createElement("span", { style: { textTransform: 'capitalize' } }, config.frequency),
+                        config.lastExecutedAt && (React.createElement("span", null,
+                            "Last: ",
+                            new Date(config.lastExecutedAt).toLocaleDateString())))));
+            })))),
+        React.createElement("div", { style: { flex: 1, display: 'flex', flexDirection: 'column', gap: theme.spacing.lg } },
+            !selectedAnalytics && (React.createElement("div", { style: placeholderStyle },
+                React.createElement("h3", { style: { margin: 0, color: theme.colors.text } }, "No analytics selected"),
+                React.createElement("p", { style: { margin: 0 } }, "Select an analytics type from the left to view results."))),
+            selectedAnalytics && resultLoading && (React.createElement("div", { style: placeholderStyle }, "Loading results...")),
+            selectedAnalytics && resultError && (React.createElement("div", { style: placeholderStyle },
+                "Error loading results: ",
+                resultError.message)),
+            selectedAnalytics && !resultLoading && !result && (React.createElement("div", { style: placeholderStyle },
+                React.createElement("h3", { style: { margin: 0, color: theme.colors.text } }, "No results yet"),
+                React.createElement("p", { style: { margin: 0 } }, "This analytics has not run yet. Results will appear after the first run."))),
+            selectedAnalytics && result && (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.spacing.lg } },
+                React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.spacing.xs } },
+                    React.createElement("h2", { style: { margin: 0, fontSize: theme.fontSizes.xl, color: theme.colors.text } }, selectedConfig === null || selectedConfig === void 0 ? void 0 : selectedConfig.analyticsType),
+                    React.createElement("p", { style: { margin: 0, color: theme.colors.textSecondary, fontSize: theme.fontSizes.sm } },
+                        "Generated: ",
+                        new Date(result.createdAt).toLocaleString())),
+                result.metrics && result.metrics.length > 0 && (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.spacing.md } },
+                    React.createElement("h3", { style: { margin: 0, fontSize: theme.fontSizes.lg } }, "Metrics"),
+                    React.createElement("div", { style: {
+                            display: 'grid',
+                            gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))',
+                            gap: theme.spacing.md,
+                        } }, result.metrics.map((metric, index) => (React.createElement("div", { key: index, style: Object.assign(Object.assign({}, cardStyle), { borderLeft: `4px solid ${metric.status === 'ok'
+                                ? theme.colors.success
+                                : metric.status === 'warning'
+                                    ? '#f59e0b'
+                                    : theme.colors.error}` }) },
+                        React.createElement("div", { style: {
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                                marginBottom: theme.spacing.xs,
+                            } },
+                            React.createElement("span", { style: { fontWeight: 600 } }, metric.name),
+                            React.createElement("span", { style: statusBadgeStyle(metric.status) }, metric.status)),
+                        React.createElement("div", { style: { fontSize: theme.fontSizes.xl, fontWeight: 700 } },
+                            metric.value,
+                            " ",
+                            metric.unit),
+                        React.createElement("div", { style: { color: theme.colors.textSecondary, fontSize: theme.fontSizes.sm } }, metric.explanation))))))),
+                result.observations && result.observations.length > 0 && (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.spacing.md } },
+                    React.createElement("h3", { style: { margin: 0, fontSize: theme.fontSizes.lg } }, "Observations"),
+                    React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.spacing.sm } }, result.observations.map((observation, index) => (React.createElement("div", { key: index, style: Object.assign(Object.assign({}, cardStyle), { borderLeft: `4px solid ${observation.severity === 'high'
+                                ? theme.colors.error
+                                : observation.severity === 'medium'
+                                    ? '#f59e0b'
+                                    : theme.colors.primary}`, display: 'flex', flexDirection: 'column', gap: theme.spacing.xs }) },
+                        React.createElement("div", { style: { display: 'flex', gap: theme.spacing.sm, alignItems: 'center' } },
+                            React.createElement("span", { style: statusBadgeStyle(observation.severity) }, observation.severity),
+                            React.createElement("span", { style: { color: theme.colors.textSecondary, fontSize: theme.fontSizes.sm } }, observation.scope)),
+                        React.createElement("div", { style: { color: theme.colors.text, fontSize: theme.fontSizes.sm } }, observation.text))))))),
+                result.directives && result.directives.length > 0 && (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.spacing.md } },
+                    React.createElement("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
+                        React.createElement("h3", { style: { margin: 0, fontSize: theme.fontSizes.lg } }, "Recommended actions"),
+                        React.createElement("div", { style: { display: 'flex', gap: theme.spacing.xs } },
+                            React.createElement("button", { type: "button", onClick: () => setDirectiveFilter('all'), style: Object.assign(Object.assign({}, pillStyle(directiveFilter === 'all' ? theme.colors.primary : theme.colors.surface)), { border: `1px solid ${theme.colors.border}`, color: directiveFilter === 'all' ? '#fff' : theme.colors.text }) },
+                                "All (",
+                                result.directives.length,
+                                ")"),
+                            React.createElement("button", { type: "button", onClick: () => setDirectiveFilter('proposed'), style: Object.assign(Object.assign({}, pillStyle(directiveFilter === 'proposed' ? theme.colors.primary : theme.colors.surface)), { border: `1px solid ${theme.colors.border}`, color: directiveFilter === 'proposed' ? '#fff' : theme.colors.text }) },
+                                "Proposed (",
+                                proposedCount,
+                                ")"),
+                            React.createElement("button", { type: "button", onClick: () => setDirectiveFilter('executed'), style: Object.assign(Object.assign({}, pillStyle(directiveFilter === 'executed' ? theme.colors.primary : theme.colors.surface)), { border: `1px solid ${theme.colors.border}`, color: directiveFilter === 'executed' ? '#fff' : theme.colors.text }) },
+                                "Executed (",
+                                executedCount,
+                                ")"),
+                            React.createElement("button", { type: "button", onClick: () => setDirectiveFilter('declined'), style: Object.assign(Object.assign({}, pillStyle(directiveFilter === 'declined' ? theme.colors.primary : theme.colors.surface)), { border: `1px solid ${theme.colors.border}`, color: directiveFilter === 'declined' ? '#fff' : theme.colors.text }) },
+                                "Declined (",
+                                declinedCount,
+                                ")"))),
+                    filteredDirectives.length === 0 && (React.createElement("div", { style: placeholderStyle }, "No directives match the selected filter.")),
+                    React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.spacing.sm } }, filteredDirectives.map((directive) => (React.createElement("div", { key: directive.directiveId, style: directiveCardStyle(directive.status) },
+                        React.createElement("div", { style: {
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                                gap: theme.spacing.sm,
+                                flexWrap: 'wrap',
+                            } },
+                            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.spacing.xs } },
+                                React.createElement("span", { style: { fontWeight: 700 } }, directive.action),
+                                React.createElement("span", { style: { color: theme.colors.textSecondary, fontSize: theme.fontSizes.sm } },
+                                    "Priority: ",
+                                    directive.priority)),
+                            React.createElement("span", { style: statusBadgeStyle(directive.status) }, directive.status)),
+                        React.createElement("div", { style: { color: theme.colors.text, fontSize: theme.fontSizes.sm } }, directive.rationale),
+                        directive.parameters && directive.parameters.length > 0 && (React.createElement("div", { style: { color: theme.colors.textSecondary, fontSize: theme.fontSizes.sm } },
+                            React.createElement("strong", { style: { color: theme.colors.text } }, "Parameters:"),
+                            React.createElement("ul", { style: { margin: `${theme.spacing.xs} 0 0 16px`, padding: 0 } }, directive.parameters.map((param, index) => (React.createElement("li", { key: index, style: { marginBottom: theme.spacing.xs } },
+                                React.createElement("code", null, param.name),
+                                ": ",
+                                param.value)))))),
+                        directive.status === 'proposed' && (React.createElement("div", { style: { display: 'flex', gap: theme.spacing.sm } },
+                            React.createElement("button", { type: "button", onClick: () => handleDirectiveAction(directive, 'execute'), disabled: isProcessing, style: Object.assign(Object.assign({}, pillStyle(theme.colors.success)), { border: 'none', cursor: isProcessing ? 'not-allowed' : 'pointer' }) }, isProcessing ? 'Processing...' : 'Execute'),
+                            React.createElement("button", { type: "button", onClick: () => handleDirectiveAction(directive, 'decline'), disabled: isProcessing, style: Object.assign(Object.assign({}, pillStyle(theme.colors.error)), { border: 'none', cursor: isProcessing ? 'not-allowed' : 'pointer' }) }, "Decline"))))))))))))));
+}
+
 exports.AnalyticsAPI = AnalyticsAPI;
+exports.AnalyticsDashboard = AnalyticsDashboard;
 exports.AnalyticsReport = AnalyticsReport;
 exports.AnalyticsWidget = AnalyticsWidget;
 exports.DirectivesPanel = DirectivesPanel;