reactbridge-sdk 0.2.2 → 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { DirectiveActionCallback } from '../../types/analytics';
|
|
3
|
-
import '
|
|
3
|
+
import type { Theme } from '../../types';
|
|
4
4
|
export interface AnalyticsDashboardProps {
|
|
5
5
|
onDirectiveAction: DirectiveActionCallback;
|
|
6
6
|
className?: string;
|
|
7
7
|
showRefresh?: boolean;
|
|
8
8
|
autoRefreshInterval?: number;
|
|
9
|
+
theme?: Theme;
|
|
9
10
|
}
|
|
10
|
-
export declare function AnalyticsDashboard({ onDirectiveAction, className, showRefresh, autoRefreshInterval, }: AnalyticsDashboardProps): React.JSX.Element;
|
|
11
|
+
export declare function AnalyticsDashboard({ onDirectiveAction, className, showRefresh, autoRefreshInterval, theme: customTheme, }: AnalyticsDashboardProps): React.JSX.Element;
|
|
11
12
|
//# sourceMappingURL=AnalyticsDashboard.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnalyticsDashboard.d.ts","sourceRoot":"","sources":["../../../src/components/analytics/AnalyticsDashboard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"AnalyticsDashboard.d.ts","sourceRoot":"","sources":["../../../src/components/analytics/AnalyticsDashboard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,OAAO,KAAK,EAAsB,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AACzF,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEzC,MAAM,WAAW,uBAAuB;IACtC,iBAAiB,EAAE,uBAAuB,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED,wBAAgB,kBAAkB,CAAC,EACjC,iBAAiB,EACjB,SAAc,EACd,WAAkB,EAClB,mBAAuB,EACvB,KAAK,EAAE,WAAW,GACnB,EAAE,uBAAuB,qBAygBzB"}
|
package/dist/index.esm.js
CHANGED
|
@@ -2151,37 +2151,9 @@ const AnalyticsWidget = ({ position = 'bottom-right', theme: customTheme, onDire
|
|
|
2151
2151
|
isOpen && (React.createElement(AnalyticsDrawer, { isOpen: isOpen, onClose: () => setIsOpen(false), configs: configs, isLoading: isLoading, theme: theme, onDirectiveAction: onDirectiveAction }))));
|
|
2152
2152
|
};
|
|
2153
2153
|
|
|
2154
|
-
function
|
|
2155
|
-
|
|
2156
|
-
|
|
2157
|
-
|
|
2158
|
-
if (typeof document === 'undefined') { return; }
|
|
2159
|
-
|
|
2160
|
-
var head = document.head || document.getElementsByTagName('head')[0];
|
|
2161
|
-
var style = document.createElement('style');
|
|
2162
|
-
style.type = 'text/css';
|
|
2163
|
-
|
|
2164
|
-
if (insertAt === 'top') {
|
|
2165
|
-
if (head.firstChild) {
|
|
2166
|
-
head.insertBefore(style, head.firstChild);
|
|
2167
|
-
} else {
|
|
2168
|
-
head.appendChild(style);
|
|
2169
|
-
}
|
|
2170
|
-
} else {
|
|
2171
|
-
head.appendChild(style);
|
|
2172
|
-
}
|
|
2173
|
-
|
|
2174
|
-
if (style.styleSheet) {
|
|
2175
|
-
style.styleSheet.cssText = css;
|
|
2176
|
-
} else {
|
|
2177
|
-
style.appendChild(document.createTextNode(css));
|
|
2178
|
-
}
|
|
2179
|
-
}
|
|
2180
|
-
|
|
2181
|
-
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}}";
|
|
2182
|
-
styleInject(css_248z,{"insertAt":"top"});
|
|
2183
|
-
|
|
2184
|
-
function AnalyticsDashboard({ onDirectiveAction, className = '', showRefresh = true, autoRefreshInterval = 0, }) {
|
|
2154
|
+
function AnalyticsDashboard({ onDirectiveAction, className = '', showRefresh = true, autoRefreshInterval = 0, theme: customTheme, }) {
|
|
2155
|
+
const { theme: contextTheme } = useReactBridgeContext();
|
|
2156
|
+
const theme = customTheme || contextTheme;
|
|
2185
2157
|
const [selectedAnalytics, setSelectedAnalytics] = useState(null);
|
|
2186
2158
|
const [directiveFilter, setDirectiveFilter] = useState('all');
|
|
2187
2159
|
// Fetch analytics configurations
|
|
@@ -2225,102 +2197,238 @@ function AnalyticsDashboard({ onDirectiveAction, className = '', showRefresh = t
|
|
|
2225
2197
|
return d.status === directiveFilter;
|
|
2226
2198
|
})) || [];
|
|
2227
2199
|
const selectedConfig = configs === null || configs === void 0 ? void 0 : configs.find(c => c.analyticsType === selectedAnalytics);
|
|
2228
|
-
|
|
2229
|
-
|
|
2230
|
-
|
|
2231
|
-
|
|
2232
|
-
|
|
2233
|
-
|
|
2234
|
-
|
|
2200
|
+
const proposedCount = (result === null || result === void 0 ? void 0 : result.directives.filter(d => d.status === 'proposed').length) || 0;
|
|
2201
|
+
const executedCount = (result === null || result === void 0 ? void 0 : result.directives.filter(d => d.status === 'executed').length) || 0;
|
|
2202
|
+
const declinedCount = (result === null || result === void 0 ? void 0 : result.directives.filter(d => d.status === 'declined').length) || 0;
|
|
2203
|
+
const containerStyle = {
|
|
2204
|
+
display: 'flex',
|
|
2205
|
+
gap: theme.spacing.lg,
|
|
2206
|
+
width: '100%',
|
|
2207
|
+
minHeight: '540px',
|
|
2208
|
+
backgroundColor: theme.colors.background,
|
|
2209
|
+
color: theme.colors.text,
|
|
2210
|
+
border: `1px solid ${theme.colors.border}`,
|
|
2211
|
+
borderRadius: theme.borderRadius,
|
|
2212
|
+
boxShadow: theme.boxShadow,
|
|
2213
|
+
padding: theme.spacing.lg,
|
|
2214
|
+
};
|
|
2215
|
+
const sidebarStyle = {
|
|
2216
|
+
width: '320px',
|
|
2217
|
+
borderRight: `1px solid ${theme.colors.border}`,
|
|
2218
|
+
paddingRight: theme.spacing.lg,
|
|
2219
|
+
display: 'flex',
|
|
2220
|
+
flexDirection: 'column',
|
|
2221
|
+
gap: theme.spacing.sm,
|
|
2222
|
+
};
|
|
2223
|
+
const listItemStyle = (isActive, isDisabled) => ({
|
|
2224
|
+
width: '100%',
|
|
2225
|
+
textAlign: 'left',
|
|
2226
|
+
padding: theme.spacing.md,
|
|
2227
|
+
backgroundColor: isActive ? theme.colors.primary : theme.colors.surface,
|
|
2228
|
+
color: isActive ? '#fff' : theme.colors.text,
|
|
2229
|
+
border: `1px solid ${isActive ? theme.colors.primary : theme.colors.border}`,
|
|
2230
|
+
borderRadius: theme.borderRadius,
|
|
2231
|
+
cursor: isDisabled ? 'not-allowed' : 'pointer',
|
|
2232
|
+
opacity: isDisabled ? 0.6 : 1,
|
|
2233
|
+
transition: 'transform 0.15s ease, box-shadow 0.15s ease',
|
|
2234
|
+
boxShadow: isActive ? theme.boxShadow : 'none',
|
|
2235
|
+
});
|
|
2236
|
+
const pillStyle = (bg) => ({
|
|
2237
|
+
fontSize: theme.fontSizes.xs,
|
|
2238
|
+
padding: '2px 8px',
|
|
2239
|
+
borderRadius: '999px',
|
|
2240
|
+
backgroundColor: bg,
|
|
2241
|
+
color: '#fff',
|
|
2242
|
+
fontWeight: 600,
|
|
2243
|
+
});
|
|
2244
|
+
const placeholderStyle = {
|
|
2245
|
+
flex: 1,
|
|
2246
|
+
minHeight: '420px',
|
|
2247
|
+
display: 'flex',
|
|
2248
|
+
flexDirection: 'column',
|
|
2249
|
+
alignItems: 'center',
|
|
2250
|
+
justifyContent: 'center',
|
|
2251
|
+
gap: theme.spacing.sm,
|
|
2252
|
+
color: theme.colors.textSecondary,
|
|
2253
|
+
textAlign: 'center',
|
|
2254
|
+
};
|
|
2255
|
+
const cardStyle = {
|
|
2256
|
+
backgroundColor: theme.colors.surface,
|
|
2257
|
+
border: `1px solid ${theme.colors.border}`,
|
|
2258
|
+
borderRadius: theme.borderRadius,
|
|
2259
|
+
padding: theme.spacing.md,
|
|
2260
|
+
};
|
|
2261
|
+
const statusBadgeStyle = (status) => {
|
|
2262
|
+
const colors = {
|
|
2263
|
+
proposed: { bg: theme.colors.primary, text: '#fff' },
|
|
2264
|
+
executed: { bg: theme.colors.success, text: '#fff' },
|
|
2265
|
+
declined: { bg: theme.colors.error, text: '#fff' },
|
|
2266
|
+
ok: { bg: '#d1fae5', text: '#065f46' },
|
|
2267
|
+
warning: { bg: '#fef3c7', text: '#92400e' },
|
|
2268
|
+
critical: { bg: '#fee2e2', text: '#991b1b' },
|
|
2269
|
+
high: { bg: '#fee2e2', text: '#991b1b' },
|
|
2270
|
+
medium: { bg: '#fef3c7', text: '#92400e' },
|
|
2271
|
+
low: { bg: '#e0ecff', text: '#1e3a8a' },
|
|
2272
|
+
};
|
|
2273
|
+
const palette = colors[status] || { bg: theme.colors.surface, text: theme.colors.text };
|
|
2274
|
+
return {
|
|
2275
|
+
fontSize: theme.fontSizes.xs,
|
|
2276
|
+
padding: '2px 8px',
|
|
2277
|
+
borderRadius: '999px',
|
|
2278
|
+
backgroundColor: palette.bg,
|
|
2279
|
+
color: palette.text,
|
|
2280
|
+
fontWeight: 700,
|
|
2281
|
+
textTransform: 'capitalize',
|
|
2282
|
+
};
|
|
2283
|
+
};
|
|
2284
|
+
const directiveCardStyle = (status) => (Object.assign(Object.assign({}, cardStyle), { borderLeft: `4px solid ${status === 'executed'
|
|
2285
|
+
? theme.colors.success
|
|
2286
|
+
: status === 'declined'
|
|
2287
|
+
? theme.colors.error
|
|
2288
|
+
: theme.colors.primary}`, display: 'flex', flexDirection: 'column', gap: theme.spacing.sm }));
|
|
2289
|
+
return (React.createElement("div", { className: className, style: containerStyle },
|
|
2290
|
+
React.createElement("div", { style: sidebarStyle },
|
|
2291
|
+
React.createElement("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
|
|
2292
|
+
React.createElement("h3", { style: { margin: 0, fontSize: theme.fontSizes.lg } }, "Analytics"),
|
|
2293
|
+
showRefresh && (React.createElement("button", { type: "button", onClick: handleRefresh, disabled: configsLoading, style: {
|
|
2294
|
+
border: `1px solid ${theme.colors.border}`,
|
|
2295
|
+
backgroundColor: theme.colors.surface,
|
|
2296
|
+
color: theme.colors.text,
|
|
2297
|
+
padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
|
|
2298
|
+
borderRadius: theme.borderRadius,
|
|
2299
|
+
cursor: configsLoading ? 'not-allowed' : 'pointer',
|
|
2300
|
+
} }, configsLoading ? 'Refreshing...' : 'Refresh'))),
|
|
2301
|
+
configsLoading && (React.createElement("div", { style: placeholderStyle }, "Loading analytics...")),
|
|
2302
|
+
configsError && (React.createElement("div", { style: placeholderStyle },
|
|
2235
2303
|
"Error loading analytics: ",
|
|
2236
2304
|
configsError.message)),
|
|
2237
|
-
configs && configs.length === 0 && (React.createElement("div", {
|
|
2238
|
-
configs && configs.length > 0 && (React.createElement("div", {
|
|
2239
|
-
|
|
2240
|
-
|
|
2241
|
-
|
|
2242
|
-
|
|
2243
|
-
|
|
2244
|
-
|
|
2245
|
-
|
|
2246
|
-
|
|
2247
|
-
|
|
2248
|
-
|
|
2249
|
-
|
|
2250
|
-
|
|
2251
|
-
|
|
2252
|
-
|
|
2253
|
-
|
|
2305
|
+
configs && configs.length === 0 && (React.createElement("div", { style: placeholderStyle }, "No analytics configured. Configure analytics in your DirectivSys dashboard.")),
|
|
2306
|
+
configs && configs.length > 0 && (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.spacing.sm } }, configs.map((config) => {
|
|
2307
|
+
const isActive = selectedAnalytics === config.analyticsType;
|
|
2308
|
+
return (React.createElement("button", { key: config.configId, type: "button", onClick: () => config.isEnabled && setSelectedAnalytics(config.analyticsType), style: listItemStyle(isActive, !config.isEnabled), disabled: !config.isEnabled },
|
|
2309
|
+
React.createElement("div", { style: {
|
|
2310
|
+
display: 'flex',
|
|
2311
|
+
justifyContent: 'space-between',
|
|
2312
|
+
alignItems: 'center',
|
|
2313
|
+
marginBottom: theme.spacing.xs,
|
|
2314
|
+
width: '100%',
|
|
2315
|
+
} },
|
|
2316
|
+
React.createElement("span", { style: { fontSize: theme.fontSizes.md, fontWeight: 600 } }, config.analyticsType),
|
|
2317
|
+
!config.isEnabled && React.createElement("span", { style: pillStyle(theme.colors.textSecondary) }, "Disabled")),
|
|
2318
|
+
React.createElement("div", { style: {
|
|
2319
|
+
fontSize: theme.fontSizes.sm,
|
|
2320
|
+
color: isActive ? 'rgba(255,255,255,0.9)' : theme.colors.textSecondary,
|
|
2321
|
+
marginBottom: theme.spacing.xs,
|
|
2322
|
+
} }, config.templateDescription),
|
|
2323
|
+
React.createElement("div", { style: {
|
|
2324
|
+
display: 'flex',
|
|
2325
|
+
justifyContent: 'space-between',
|
|
2326
|
+
width: '100%',
|
|
2327
|
+
fontSize: theme.fontSizes.xs,
|
|
2328
|
+
color: isActive ? 'rgba(255,255,255,0.8)' : theme.colors.textSecondary,
|
|
2329
|
+
} },
|
|
2330
|
+
React.createElement("span", { style: { textTransform: 'capitalize' } }, config.frequency),
|
|
2331
|
+
config.lastExecutedAt && (React.createElement("span", null,
|
|
2332
|
+
"Last: ",
|
|
2333
|
+
new Date(config.lastExecutedAt).toLocaleDateString())))));
|
|
2334
|
+
})))),
|
|
2335
|
+
React.createElement("div", { style: { flex: 1, display: 'flex', flexDirection: 'column', gap: theme.spacing.lg } },
|
|
2336
|
+
!selectedAnalytics && (React.createElement("div", { style: placeholderStyle },
|
|
2337
|
+
React.createElement("h3", { style: { margin: 0, color: theme.colors.text } }, "No analytics selected"),
|
|
2338
|
+
React.createElement("p", { style: { margin: 0 } }, "Select an analytics type from the left to view results."))),
|
|
2339
|
+
selectedAnalytics && resultLoading && (React.createElement("div", { style: placeholderStyle }, "Loading results...")),
|
|
2340
|
+
selectedAnalytics && resultError && (React.createElement("div", { style: placeholderStyle },
|
|
2254
2341
|
"Error loading results: ",
|
|
2255
2342
|
resultError.message)),
|
|
2256
|
-
selectedAnalytics && !resultLoading && !result && (React.createElement("div", {
|
|
2257
|
-
React.createElement("h3",
|
|
2258
|
-
React.createElement("p",
|
|
2259
|
-
selectedAnalytics && result && (React.createElement("div", {
|
|
2260
|
-
React.createElement("div", {
|
|
2261
|
-
React.createElement("
|
|
2262
|
-
|
|
2263
|
-
|
|
2264
|
-
|
|
2265
|
-
|
|
2266
|
-
|
|
2267
|
-
React.createElement("
|
|
2268
|
-
|
|
2269
|
-
|
|
2270
|
-
|
|
2271
|
-
|
|
2272
|
-
|
|
2343
|
+
selectedAnalytics && !resultLoading && !result && (React.createElement("div", { style: placeholderStyle },
|
|
2344
|
+
React.createElement("h3", { style: { margin: 0, color: theme.colors.text } }, "No results yet"),
|
|
2345
|
+
React.createElement("p", { style: { margin: 0 } }, "This analytics has not run yet. Results will appear after the first run."))),
|
|
2346
|
+
selectedAnalytics && result && (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.spacing.lg } },
|
|
2347
|
+
React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.spacing.xs } },
|
|
2348
|
+
React.createElement("h2", { style: { margin: 0, fontSize: theme.fontSizes.xl, color: theme.colors.text } }, selectedConfig === null || selectedConfig === void 0 ? void 0 : selectedConfig.analyticsType),
|
|
2349
|
+
React.createElement("p", { style: { margin: 0, color: theme.colors.textSecondary, fontSize: theme.fontSizes.sm } },
|
|
2350
|
+
"Generated: ",
|
|
2351
|
+
new Date(result.createdAt).toLocaleString())),
|
|
2352
|
+
result.metrics && result.metrics.length > 0 && (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.spacing.md } },
|
|
2353
|
+
React.createElement("h3", { style: { margin: 0, fontSize: theme.fontSizes.lg } }, "Metrics"),
|
|
2354
|
+
React.createElement("div", { style: {
|
|
2355
|
+
display: 'grid',
|
|
2356
|
+
gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))',
|
|
2357
|
+
gap: theme.spacing.md,
|
|
2358
|
+
} }, result.metrics.map((metric, index) => (React.createElement("div", { key: index, style: Object.assign(Object.assign({}, cardStyle), { borderLeft: `4px solid ${metric.status === 'ok'
|
|
2359
|
+
? theme.colors.success
|
|
2360
|
+
: metric.status === 'warning'
|
|
2361
|
+
? '#f59e0b'
|
|
2362
|
+
: theme.colors.error}` }) },
|
|
2363
|
+
React.createElement("div", { style: {
|
|
2364
|
+
display: 'flex',
|
|
2365
|
+
justifyContent: 'space-between',
|
|
2366
|
+
alignItems: 'center',
|
|
2367
|
+
marginBottom: theme.spacing.xs,
|
|
2368
|
+
} },
|
|
2369
|
+
React.createElement("span", { style: { fontWeight: 600 } }, metric.name),
|
|
2370
|
+
React.createElement("span", { style: statusBadgeStyle(metric.status) }, metric.status)),
|
|
2371
|
+
React.createElement("div", { style: { fontSize: theme.fontSizes.xl, fontWeight: 700 } },
|
|
2273
2372
|
metric.value,
|
|
2274
2373
|
" ",
|
|
2275
2374
|
metric.unit),
|
|
2276
|
-
React.createElement("div", {
|
|
2277
|
-
result.observations && result.observations.length > 0 && (React.createElement("div", {
|
|
2278
|
-
React.createElement("h3", {
|
|
2279
|
-
React.createElement("div", {
|
|
2280
|
-
|
|
2281
|
-
|
|
2282
|
-
|
|
2283
|
-
|
|
2284
|
-
|
|
2285
|
-
|
|
2286
|
-
|
|
2287
|
-
React.createElement("div", {
|
|
2288
|
-
|
|
2375
|
+
React.createElement("div", { style: { color: theme.colors.textSecondary, fontSize: theme.fontSizes.sm } }, metric.explanation))))))),
|
|
2376
|
+
result.observations && result.observations.length > 0 && (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.spacing.md } },
|
|
2377
|
+
React.createElement("h3", { style: { margin: 0, fontSize: theme.fontSizes.lg } }, "Observations"),
|
|
2378
|
+
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'
|
|
2379
|
+
? theme.colors.error
|
|
2380
|
+
: observation.severity === 'medium'
|
|
2381
|
+
? '#f59e0b'
|
|
2382
|
+
: theme.colors.primary}`, display: 'flex', flexDirection: 'column', gap: theme.spacing.xs }) },
|
|
2383
|
+
React.createElement("div", { style: { display: 'flex', gap: theme.spacing.sm, alignItems: 'center' } },
|
|
2384
|
+
React.createElement("span", { style: statusBadgeStyle(observation.severity) }, observation.severity),
|
|
2385
|
+
React.createElement("span", { style: { color: theme.colors.textSecondary, fontSize: theme.fontSizes.sm } }, observation.scope)),
|
|
2386
|
+
React.createElement("div", { style: { color: theme.colors.text, fontSize: theme.fontSizes.sm } }, observation.text))))))),
|
|
2387
|
+
result.directives && result.directives.length > 0 && (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.spacing.md } },
|
|
2388
|
+
React.createElement("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
|
|
2389
|
+
React.createElement("h3", { style: { margin: 0, fontSize: theme.fontSizes.lg } }, "Recommended actions"),
|
|
2390
|
+
React.createElement("div", { style: { display: 'flex', gap: theme.spacing.xs } },
|
|
2391
|
+
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 }) },
|
|
2289
2392
|
"All (",
|
|
2290
2393
|
result.directives.length,
|
|
2291
2394
|
")"),
|
|
2292
|
-
React.createElement("button", { onClick: () => setDirectiveFilter('proposed'),
|
|
2395
|
+
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 }) },
|
|
2293
2396
|
"Proposed (",
|
|
2294
|
-
|
|
2397
|
+
proposedCount,
|
|
2295
2398
|
")"),
|
|
2296
|
-
React.createElement("button", { onClick: () => setDirectiveFilter('executed'),
|
|
2399
|
+
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 }) },
|
|
2297
2400
|
"Executed (",
|
|
2298
|
-
|
|
2401
|
+
executedCount,
|
|
2299
2402
|
")"),
|
|
2300
|
-
React.createElement("button", { onClick: () => setDirectiveFilter('declined'),
|
|
2403
|
+
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 }) },
|
|
2301
2404
|
"Declined (",
|
|
2302
|
-
|
|
2405
|
+
declinedCount,
|
|
2303
2406
|
")"))),
|
|
2304
|
-
filteredDirectives.length === 0 && (React.createElement("div", {
|
|
2305
|
-
|
|
2306
|
-
|
|
2307
|
-
|
|
2308
|
-
|
|
2309
|
-
|
|
2310
|
-
|
|
2407
|
+
filteredDirectives.length === 0 && (React.createElement("div", { style: placeholderStyle }, "No directives match the selected filter.")),
|
|
2408
|
+
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) },
|
|
2409
|
+
React.createElement("div", { style: {
|
|
2410
|
+
display: 'flex',
|
|
2411
|
+
justifyContent: 'space-between',
|
|
2412
|
+
alignItems: 'center',
|
|
2413
|
+
gap: theme.spacing.sm,
|
|
2414
|
+
flexWrap: 'wrap',
|
|
2415
|
+
} },
|
|
2416
|
+
React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.spacing.xs } },
|
|
2417
|
+
React.createElement("span", { style: { fontWeight: 700 } }, directive.action),
|
|
2418
|
+
React.createElement("span", { style: { color: theme.colors.textSecondary, fontSize: theme.fontSizes.sm } },
|
|
2311
2419
|
"Priority: ",
|
|
2312
2420
|
directive.priority)),
|
|
2313
|
-
React.createElement("span", {
|
|
2314
|
-
React.createElement("div", {
|
|
2315
|
-
directive.parameters && directive.parameters.length > 0 && (React.createElement("div", {
|
|
2316
|
-
React.createElement("strong",
|
|
2317
|
-
React.createElement("ul",
|
|
2421
|
+
React.createElement("span", { style: statusBadgeStyle(directive.status) }, directive.status)),
|
|
2422
|
+
React.createElement("div", { style: { color: theme.colors.text, fontSize: theme.fontSizes.sm } }, directive.rationale),
|
|
2423
|
+
directive.parameters && directive.parameters.length > 0 && (React.createElement("div", { style: { color: theme.colors.textSecondary, fontSize: theme.fontSizes.sm } },
|
|
2424
|
+
React.createElement("strong", { style: { color: theme.colors.text } }, "Parameters:"),
|
|
2425
|
+
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 } },
|
|
2318
2426
|
React.createElement("code", null, param.name),
|
|
2319
2427
|
": ",
|
|
2320
2428
|
param.value)))))),
|
|
2321
|
-
directive.status === 'proposed' && (React.createElement("div", {
|
|
2322
|
-
React.createElement("button", { onClick: () => handleDirectiveAction(directive, 'execute'), disabled: isProcessing,
|
|
2323
|
-
React.createElement("button", { onClick: () => handleDirectiveAction(directive, 'decline'), disabled: isProcessing,
|
|
2429
|
+
directive.status === 'proposed' && (React.createElement("div", { style: { display: 'flex', gap: theme.spacing.sm } },
|
|
2430
|
+
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'),
|
|
2431
|
+
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"))))))))))))));
|
|
2324
2432
|
}
|
|
2325
2433
|
|
|
2326
2434
|
export { AnalyticsAPI, AnalyticsDashboard, AnalyticsReport, AnalyticsWidget, DirectivesPanel, MetricsPanel, ObservationsPanel, ReactBridgeAPI, ReactBridgeChatbox, ReactBridgeProvider, ReactBridgeSearch, WebSpeechSTTProvider, WebSpeechTTSProvider, createCustomTheme, darkTheme, getTheme, lightTheme, useAnalyticsConfigs, useAnalyticsResult, useDirectiveAction, useReactBridge, useReactBridgeContext };
|