@burdenoff/microfe-bigconsole 2026.727.1 → 2026.727.2
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.
- package/dist/bigconsole/customWidget/CustomWidgetBuilderSheet.js +92 -0
- package/dist/bigconsole/customWidget/CustomWidgetBuilderSheet.js.map +1 -0
- package/dist/bigconsole/customWidget/CustomWidgetProposalPanel.js +449 -0
- package/dist/bigconsole/customWidget/CustomWidgetProposalPanel.js.map +1 -0
- package/dist/bigconsole/customWidget/index.js +4 -0
- package/dist/bigconsole/customWidget/proposalContract.js +106 -0
- package/dist/bigconsole/customWidget/proposalContract.js.map +1 -0
- package/dist/bigconsole/customWidget/proposalSource.js +204 -0
- package/dist/bigconsole/customWidget/proposalSource.js.map +1 -0
- package/dist/bigconsole/pages/DashboardBuilderPage.js +159 -139
- package/dist/bigconsole/pages/DashboardBuilderPage.js.map +1 -1
- package/package.json +1 -1
|
@@ -15,8 +15,10 @@ import { findNextAvailablePosition as l } from "../utils/widgetPositioning.js";
|
|
|
15
15
|
import u from "../components/dashboard/DashboardCanvas.js";
|
|
16
16
|
import d from "../components/dashboard/ExportDashboardDialog.js";
|
|
17
17
|
import "../components/dashboard/index.js";
|
|
18
|
-
import
|
|
19
|
-
import
|
|
18
|
+
import f from "../customWidget/CustomWidgetBuilderSheet.js";
|
|
19
|
+
import "../customWidget/index.js";
|
|
20
|
+
import { memo as p, useCallback as m, useEffect as h, useState as g } from "react";
|
|
21
|
+
import { useParams as ee } from "react-router-dom";
|
|
20
22
|
import { jsx as _, jsxs as v } from "react/jsx-runtime";
|
|
21
23
|
//#region src/bigconsole/pages/DashboardBuilderPage.tsx
|
|
22
24
|
function y() {
|
|
@@ -34,15 +36,15 @@ function x(e) {
|
|
|
34
36
|
let t = y();
|
|
35
37
|
t?.unregister && t.unregister(e);
|
|
36
38
|
}
|
|
37
|
-
var S =
|
|
38
|
-
let { dashboardId:
|
|
39
|
-
|
|
40
|
-
if (!
|
|
39
|
+
var S = p(function() {
|
|
40
|
+
let { dashboardId: p } = ee(), y = n(), [S, C] = g(!1), [w, T] = g(null), [E, D] = g(!1), [te, O] = g(!1), [k, A] = g(null), { fetchDashboard: j, updateDashboard: M, loading: N, error: P } = i(), { createWidget: F, updateWidget: I, deleteWidget: L, duplicateWidget: R, batchUpdatePositions: z } = r(void 0, p), { createPage: B, updatePage: V, deletePage: H, reorderPages: U } = a(), W = t((e) => e.setCurrentDashboard), G = t((e) => e.currentDashboard), K = t((e) => e.setViewMode), q = e((e) => e.selectWidget), J = e((e) => e.widgets), Y = e((e) => e.clipboardWidgetId), X = e((e) => e.clipboardAction), Z = e((e) => e.clearClipboard);
|
|
41
|
+
h(() => (K("edit"), () => K("view")), [K]), h(() => {
|
|
42
|
+
if (!p) {
|
|
41
43
|
y("/dashboards");
|
|
42
44
|
return;
|
|
43
45
|
}
|
|
44
|
-
return
|
|
45
|
-
e ? (
|
|
46
|
+
return j(p).then((e) => {
|
|
47
|
+
e ? (W({
|
|
46
48
|
...e,
|
|
47
49
|
title: e.name,
|
|
48
50
|
description: e.description ?? "",
|
|
@@ -53,26 +55,26 @@ var S = f(function() {
|
|
|
53
55
|
index: t,
|
|
54
56
|
layoutConfig: e.layoutConfig ?? {}
|
|
55
57
|
}))
|
|
56
|
-
}), e.pages.length > 0 && !
|
|
58
|
+
}), e.pages.length > 0 && !k && A(e.pages[0].id), e.name && b(p, e.name)) : y("/dashboards");
|
|
57
59
|
}), () => {
|
|
58
|
-
|
|
60
|
+
p && x(p);
|
|
59
61
|
};
|
|
60
62
|
}, [
|
|
61
|
-
|
|
63
|
+
p,
|
|
62
64
|
y,
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
65
|
+
W,
|
|
66
|
+
j,
|
|
67
|
+
k
|
|
66
68
|
]);
|
|
67
|
-
let
|
|
68
|
-
let e =
|
|
69
|
-
if (!
|
|
70
|
-
let t =
|
|
69
|
+
let Q = m(async () => {
|
|
70
|
+
let e = k ?? G?.pages?.[0]?.id;
|
|
71
|
+
if (!Y || !p || !e) return;
|
|
72
|
+
let t = J.get(Y);
|
|
71
73
|
if (!t) {
|
|
72
|
-
|
|
74
|
+
Z();
|
|
73
75
|
return;
|
|
74
76
|
}
|
|
75
|
-
let n = Array.from(
|
|
77
|
+
let n = Array.from(J.values()).filter((t) => t.pageId === e), r = {
|
|
76
78
|
width: t.positionWidth ?? 4,
|
|
77
79
|
height: t.positionHeight ?? 4
|
|
78
80
|
}, { x: i, y: a } = l(n, r, { cols: 12 }), o = {
|
|
@@ -80,10 +82,10 @@ var S = f(function() {
|
|
|
80
82
|
y: a,
|
|
81
83
|
width: r.width,
|
|
82
84
|
height: r.height
|
|
83
|
-
}, s =
|
|
84
|
-
c ||= await
|
|
85
|
+
}, s = X === "copy" ? `${t.title} (Copy)` : t.title, c = await R(Y, o, s).catch(() => null);
|
|
86
|
+
c ||= await F({
|
|
85
87
|
pageId: e,
|
|
86
|
-
dashboardId:
|
|
88
|
+
dashboardId: p,
|
|
87
89
|
type: t.type,
|
|
88
90
|
title: s,
|
|
89
91
|
description: t.description,
|
|
@@ -95,21 +97,21 @@ var S = f(function() {
|
|
|
95
97
|
position: o,
|
|
96
98
|
refreshInterval: t.refreshInterval ?? void 0,
|
|
97
99
|
metadata: t.metadata
|
|
98
|
-
}), c && (
|
|
100
|
+
}), c && (q(c.id), X === "cut" && await L(Y)), Z();
|
|
99
101
|
}, [
|
|
100
|
-
J,
|
|
101
102
|
Y,
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
103
|
+
X,
|
|
104
|
+
p,
|
|
105
|
+
k,
|
|
106
|
+
G,
|
|
107
|
+
J,
|
|
108
|
+
R,
|
|
109
|
+
F,
|
|
106
110
|
L,
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
K,
|
|
110
|
-
X
|
|
111
|
+
q,
|
|
112
|
+
Z
|
|
111
113
|
]);
|
|
112
|
-
|
|
114
|
+
h(() => {
|
|
113
115
|
let n = (n) => {
|
|
114
116
|
if (t.getState().viewMode !== "edit" || n.target?.closest("input, textarea, select, [contenteditable=\"true\"]") || document.querySelector("[data-slot=\"dialog-overlay\"]")) return;
|
|
115
117
|
let r = e.getState(), i = r.selectedWidgetId;
|
|
@@ -118,22 +120,22 @@ var S = f(function() {
|
|
|
118
120
|
return;
|
|
119
121
|
}
|
|
120
122
|
if ((n.key === "Delete" || n.key === "Backspace") && i) {
|
|
121
|
-
n.preventDefault(),
|
|
123
|
+
n.preventDefault(), L(i), r.selectWidget(null);
|
|
122
124
|
return;
|
|
123
125
|
}
|
|
124
|
-
(n.metaKey || n.ctrlKey) && (n.key === "c" && i ? r.copyWidget(i) : n.key === "x" && i ? r.cutWidget(i) : n.key === "v" && (n.preventDefault(),
|
|
126
|
+
(n.metaKey || n.ctrlKey) && (n.key === "c" && i ? r.copyWidget(i) : n.key === "x" && i ? r.cutWidget(i) : n.key === "v" && (n.preventDefault(), Q()));
|
|
125
127
|
};
|
|
126
128
|
return document.addEventListener("keydown", n, !0), () => document.removeEventListener("keydown", n, !0);
|
|
127
|
-
}, [
|
|
128
|
-
let
|
|
129
|
+
}, [L, Q]);
|
|
130
|
+
let ne = m(() => {
|
|
129
131
|
y("/dashboards");
|
|
130
|
-
}, [y]),
|
|
131
|
-
if (
|
|
132
|
+
}, [y]), re = m(async () => {
|
|
133
|
+
if (p) {
|
|
132
134
|
C(!0), T(null);
|
|
133
135
|
try {
|
|
134
136
|
let t = e.getState(), n = Array.from(t.widgets.values()), r = t.dirtyWidgetIds, i = n.filter((e) => r.has(e.id));
|
|
135
137
|
if (i.length > 0) {
|
|
136
|
-
let e = i.map((e) =>
|
|
138
|
+
let e = i.map((e) => I({
|
|
137
139
|
id: e.id,
|
|
138
140
|
title: e.title,
|
|
139
141
|
config: e.config,
|
|
@@ -145,7 +147,7 @@ var S = f(function() {
|
|
|
145
147
|
}));
|
|
146
148
|
await Promise.all(e), t.clearAllDirty();
|
|
147
149
|
}
|
|
148
|
-
n.length > 0 && await
|
|
150
|
+
n.length > 0 && await z(n.map((e) => ({
|
|
149
151
|
id: e.id,
|
|
150
152
|
position: e.position || {
|
|
151
153
|
x: e.positionX ?? 0,
|
|
@@ -153,10 +155,10 @@ var S = f(function() {
|
|
|
153
155
|
width: e.positionWidth ?? 4,
|
|
154
156
|
height: e.positionHeight ?? 4
|
|
155
157
|
}
|
|
156
|
-
}))),
|
|
157
|
-
id:
|
|
158
|
-
name:
|
|
159
|
-
description:
|
|
158
|
+
}))), G && await M({
|
|
159
|
+
id: p,
|
|
160
|
+
name: G.title,
|
|
161
|
+
description: G.description
|
|
160
162
|
});
|
|
161
163
|
} catch (e) {
|
|
162
164
|
T(e instanceof Error ? e.message : "Failed to save dashboard");
|
|
@@ -165,105 +167,105 @@ var S = f(function() {
|
|
|
165
167
|
}
|
|
166
168
|
}
|
|
167
169
|
}, [
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
]),
|
|
170
|
+
p,
|
|
171
|
+
G,
|
|
172
|
+
I,
|
|
173
|
+
z,
|
|
174
|
+
M
|
|
175
|
+
]), $ = m(() => {
|
|
174
176
|
D(!0);
|
|
175
|
-
}, []),
|
|
177
|
+
}, []), ie = m(() => {
|
|
176
178
|
D(!1);
|
|
177
|
-
}, []),
|
|
178
|
-
|
|
179
|
-
}, []),
|
|
180
|
-
if (!
|
|
181
|
-
let e = await
|
|
182
|
-
dashboardId:
|
|
183
|
-
name: `Page ${
|
|
179
|
+
}, []), ae = m((e) => {
|
|
180
|
+
A(e);
|
|
181
|
+
}, []), oe = m(async () => {
|
|
182
|
+
if (!G || !p) return;
|
|
183
|
+
let e = await B({
|
|
184
|
+
dashboardId: p,
|
|
185
|
+
name: `Page ${G.pages.length + 1}`
|
|
184
186
|
});
|
|
185
|
-
e && (
|
|
186
|
-
...
|
|
187
|
-
pages: [...
|
|
187
|
+
e && (W({
|
|
188
|
+
...G,
|
|
189
|
+
pages: [...G.pages, {
|
|
188
190
|
id: e.id,
|
|
189
191
|
title: e.name,
|
|
190
192
|
index: e.order,
|
|
191
193
|
layoutConfig: e.layoutConfig || {}
|
|
192
194
|
}]
|
|
193
|
-
}),
|
|
195
|
+
}), A(e.id));
|
|
194
196
|
}, [
|
|
197
|
+
G,
|
|
198
|
+
p,
|
|
195
199
|
W,
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
]), ie = p(async (e, t) => {
|
|
200
|
-
W && await B({
|
|
200
|
+
B
|
|
201
|
+
]), se = m(async (e, t) => {
|
|
202
|
+
G && await V({
|
|
201
203
|
id: e,
|
|
202
204
|
name: t
|
|
203
|
-
}) &&
|
|
204
|
-
...
|
|
205
|
-
pages:
|
|
205
|
+
}) && W({
|
|
206
|
+
...G,
|
|
207
|
+
pages: G.pages.map((n) => n.id === e ? {
|
|
206
208
|
...n,
|
|
207
209
|
title: t
|
|
208
210
|
} : n)
|
|
209
211
|
});
|
|
210
212
|
}, [
|
|
213
|
+
G,
|
|
211
214
|
W,
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
let t = W.pages.find((t) => t.id === e);
|
|
215
|
+
V
|
|
216
|
+
]), ce = m(async (e) => {
|
|
217
|
+
if (!G || !p) return;
|
|
218
|
+
let t = G.pages.find((t) => t.id === e);
|
|
217
219
|
if (!t) return;
|
|
218
|
-
let n = await
|
|
219
|
-
dashboardId:
|
|
220
|
+
let n = await B({
|
|
221
|
+
dashboardId: p,
|
|
220
222
|
name: `${t.title} (Copy)`
|
|
221
223
|
});
|
|
222
|
-
n && (
|
|
223
|
-
...
|
|
224
|
-
pages: [...
|
|
224
|
+
n && (W({
|
|
225
|
+
...G,
|
|
226
|
+
pages: [...G.pages, {
|
|
225
227
|
id: n.id,
|
|
226
228
|
title: n.name,
|
|
227
229
|
index: n.order,
|
|
228
230
|
layoutConfig: n.layoutConfig || {}
|
|
229
231
|
}]
|
|
230
|
-
}),
|
|
232
|
+
}), A(n.id));
|
|
231
233
|
}, [
|
|
234
|
+
G,
|
|
235
|
+
p,
|
|
232
236
|
W,
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
if (!(!W || W.pages.length <= 1) && await V(e)) {
|
|
238
|
-
let t = W.pages.filter((t) => t.id !== e).map((e, t) => ({
|
|
237
|
+
B
|
|
238
|
+
]), le = m(async (e) => {
|
|
239
|
+
if (!(!G || G.pages.length <= 1) && await H(e)) {
|
|
240
|
+
let t = G.pages.filter((t) => t.id !== e).map((e, t) => ({
|
|
239
241
|
...e,
|
|
240
242
|
index: t
|
|
241
243
|
}));
|
|
242
|
-
|
|
243
|
-
...
|
|
244
|
+
W({
|
|
245
|
+
...G,
|
|
244
246
|
pages: t
|
|
245
|
-
}),
|
|
247
|
+
}), k === e && A(t[0]?.id || null);
|
|
246
248
|
}
|
|
247
249
|
}, [
|
|
250
|
+
G,
|
|
248
251
|
W,
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
...W,
|
|
252
|
+
k,
|
|
253
|
+
H
|
|
254
|
+
]), ue = m(async (e) => {
|
|
255
|
+
!G || !p || (W({
|
|
256
|
+
...G,
|
|
255
257
|
pages: e.map((e, t) => ({
|
|
256
258
|
...e,
|
|
257
259
|
index: t
|
|
258
260
|
}))
|
|
259
|
-
}), await
|
|
261
|
+
}), await U(p, e.map((e) => e.id)));
|
|
260
262
|
}, [
|
|
263
|
+
G,
|
|
264
|
+
p,
|
|
261
265
|
W,
|
|
262
|
-
|
|
263
|
-
U,
|
|
264
|
-
H
|
|
266
|
+
U
|
|
265
267
|
]);
|
|
266
|
-
return
|
|
268
|
+
return P ? /* @__PURE__ */ _("div", {
|
|
267
269
|
className: "flex flex-col items-center justify-center h-full p-6",
|
|
268
270
|
children: /* @__PURE__ */ v("div", {
|
|
269
271
|
className: "bg-status-error-bg border border-status-error-border rounded-lg p-4 max-w-md",
|
|
@@ -274,7 +276,7 @@ var S = f(function() {
|
|
|
274
276
|
}),
|
|
275
277
|
/* @__PURE__ */ _("p", {
|
|
276
278
|
className: "text-sm text-text-secondary mt-1",
|
|
277
|
-
children:
|
|
279
|
+
children: P.message
|
|
278
280
|
}),
|
|
279
281
|
/* @__PURE__ */ _("button", {
|
|
280
282
|
type: "button",
|
|
@@ -284,46 +286,64 @@ var S = f(function() {
|
|
|
284
286
|
})
|
|
285
287
|
]
|
|
286
288
|
})
|
|
287
|
-
}) :
|
|
289
|
+
}) : N || !G ? /* @__PURE__ */ _("div", {
|
|
288
290
|
className: "flex items-center justify-center h-full",
|
|
289
291
|
children: /* @__PURE__ */ _("div", { className: "animate-spin w-8 h-8 border-4 border-action-primary-bg border-t-transparent rounded-full" })
|
|
290
292
|
}) : /* @__PURE__ */ v(c, {
|
|
291
293
|
topbar: /* @__PURE__ */ _(s, {
|
|
292
|
-
title:
|
|
293
|
-
onBack:
|
|
294
|
-
actions:
|
|
295
|
-
className: "
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
294
|
+
title: G.title || "Untitled dashboard",
|
|
295
|
+
onBack: ne,
|
|
296
|
+
actions: /* @__PURE__ */ v("div", {
|
|
297
|
+
className: "flex items-center gap-2",
|
|
298
|
+
children: [w ? /* @__PURE__ */ _("span", {
|
|
299
|
+
className: "text-xs font-medium text-status-error-text",
|
|
300
|
+
role: "alert",
|
|
301
|
+
children: w
|
|
302
|
+
}) : null, /* @__PURE__ */ _("button", {
|
|
303
|
+
type: "button",
|
|
304
|
+
"data-testid": "open-custom-widget-builder",
|
|
305
|
+
onClick: () => O(!0),
|
|
306
|
+
className: "rounded-md border border-border-default px-2 py-1 text-xs font-medium text-text-primary hover:bg-bg-sunken focus:outline-none focus-visible:ring-2 focus-visible:ring-action-primary-bg",
|
|
307
|
+
children: "AI widget"
|
|
308
|
+
})]
|
|
309
|
+
})
|
|
299
310
|
}),
|
|
300
|
-
children: [
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
311
|
+
children: [
|
|
312
|
+
/* @__PURE__ */ _(o, { canvas: /* @__PURE__ */ _(u, {
|
|
313
|
+
dashboardId: G.id,
|
|
314
|
+
pageId: k || G.pages?.[0]?.id,
|
|
315
|
+
title: G.title,
|
|
316
|
+
onPaste: Q,
|
|
317
|
+
onSave: re,
|
|
318
|
+
isSaving: S,
|
|
319
|
+
onExport: $,
|
|
320
|
+
pages: G.pages.map((e) => ({
|
|
321
|
+
id: e.id,
|
|
322
|
+
name: e.title || `Page ${(e.index ?? 0) + 1}`,
|
|
323
|
+
order: e.index ?? 0
|
|
324
|
+
})),
|
|
325
|
+
activePageId: k || G.pages?.[0]?.id,
|
|
326
|
+
onPageChange: ae,
|
|
327
|
+
onPageAdd: oe,
|
|
328
|
+
onPageRename: se,
|
|
329
|
+
onPageDuplicate: ce,
|
|
330
|
+
onPageDelete: le,
|
|
331
|
+
onPagesReorder: ue,
|
|
332
|
+
showPageTabs: !0
|
|
333
|
+
}) }),
|
|
334
|
+
/* @__PURE__ */ _(d, {
|
|
335
|
+
isOpen: E,
|
|
336
|
+
dashboardId: G.id,
|
|
337
|
+
dashboardName: G.title,
|
|
338
|
+
onClose: ie
|
|
339
|
+
}),
|
|
340
|
+
/* @__PURE__ */ _(f, {
|
|
341
|
+
isOpen: te,
|
|
342
|
+
onClose: () => O(!1),
|
|
343
|
+
dashboardId: G.id,
|
|
344
|
+
pageId: k || G.pages?.[0]?.id || ""
|
|
345
|
+
})
|
|
346
|
+
]
|
|
327
347
|
});
|
|
328
348
|
});
|
|
329
349
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DashboardBuilderPage.js","names":[],"sources":["../../../src/bigconsole/pages/DashboardBuilderPage.tsx"],"sourcesContent":["/**\n * DashboardBuilderPage\n *\n * Full dashboard builder experience with side panels.\n */\n\nimport { type FC, memo, useState, useEffect, useCallback } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { useBigConsoleNavigate } from '../context';\nimport { DashboardCanvas, ExportDashboardDialog } from '../components/dashboard';\nimport { BuilderCanvas, BuilderTopbar, DashboardEditorShell } from '../components/builder';\nimport { useDashboardStore, useWidgetStore } from '../store';\nimport { useDashboardOperations, useWidgetOperations, usePageOperations } from '../hooks';\nimport type { Dashboard, DashboardPage } from '../types';\nimport { findNextAvailablePosition } from '../utils/widgetPositioning';\n\n// Breadcrumb name registration helpers (get from shell at call time to avoid timing issues)\nfunction getBreadcrumbRegistry() {\n try {\n return (\n window as unknown as {\n __breadcrumbRegistry?: { register: (id: string, name: string) => void; unregister: (id: string) => void };\n }\n ).__breadcrumbRegistry;\n } catch {\n return undefined;\n }\n}\n\nfunction registerBreadcrumbName(id: string, name: string) {\n const registry = getBreadcrumbRegistry();\n if (registry?.register) {\n registry.register(id, name);\n }\n}\n\nfunction unregisterBreadcrumbName(id: string) {\n const registry = getBreadcrumbRegistry();\n if (registry?.unregister) {\n registry.unregister(id);\n }\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DashboardBuilderPage: FC = memo(function DashboardBuilderPage() {\n const { dashboardId } = useParams<{ dashboardId: string }>();\n const navigate = useBigConsoleNavigate();\n const [isSaving, setIsSaving] = useState(false);\n const [saveError, setSaveError] = useState<string | null>(null);\n const [isExportDialogOpen, setIsExportDialogOpen] = useState(false);\n const [activePageId, setActivePageId] = useState<string | null>(null);\n\n // Dashboard operations from GraphQL\n const {\n fetchDashboard,\n updateDashboard,\n loading: dashboardLoading,\n error: dashboardError,\n } = useDashboardOperations();\n\n // Widget operations from GraphQL\n const {\n createWidget: createWidgetMutation,\n updateWidget: updateWidgetMutation,\n deleteWidget: deleteWidgetMutation,\n duplicateWidget: duplicateWidgetMutation,\n batchUpdatePositions,\n } = useWidgetOperations(undefined, dashboardId);\n\n // Page operations from GraphQL\n const {\n createPage: createPageMutation,\n updatePage: updatePageMutation,\n deletePage: deletePageMutation,\n reorderPages: reorderPagesMutation,\n } = usePageOperations();\n\n // Store actions\n const setCurrentDashboard = useDashboardStore((state) => state.setCurrentDashboard);\n const currentDashboard = useDashboardStore((state) => state.currentDashboard);\n const setViewMode = useDashboardStore((state) => state.setViewMode);\n const selectWidget = useWidgetStore((state) => state.selectWidget);\n const widgets = useWidgetStore((state) => state.widgets);\n const clipboardWidgetId = useWidgetStore((state) => state.clipboardWidgetId);\n const clipboardAction = useWidgetStore((state) => state.clipboardAction);\n const clearClipboard = useWidgetStore((state) => state.clearClipboard);\n\n // Set edit mode on mount\n useEffect(() => {\n setViewMode('edit');\n return () => setViewMode('view');\n }, [setViewMode]);\n\n // Load dashboard data from API\n useEffect(() => {\n if (!dashboardId) {\n navigate('/dashboards');\n return;\n }\n\n // Fetch dashboard from API\n fetchDashboard(dashboardId).then((dashboard) => {\n if (dashboard) {\n const builderDashboard: Dashboard = {\n ...dashboard,\n title: dashboard.name,\n description: dashboard.description ?? '',\n pages: dashboard.pages.map((page, index) => ({\n ...page,\n id: page.id,\n title: page.name ?? '',\n index,\n layoutConfig: page.layoutConfig ?? {},\n })),\n };\n setCurrentDashboard(builderDashboard);\n // Set active page to first page\n if (dashboard.pages.length > 0 && !activePageId) {\n setActivePageId(dashboard.pages[0].id);\n }\n\n // Register dashboard name for breadcrumb display\n if (dashboard.name) {\n registerBreadcrumbName(dashboardId, dashboard.name);\n }\n } else {\n // Dashboard not found, redirect\n navigate('/dashboards');\n }\n });\n\n // Cleanup: unregister breadcrumb name on unmount\n return () => {\n if (dashboardId) {\n unregisterBreadcrumbName(dashboardId);\n }\n };\n }, [dashboardId, navigate, setCurrentDashboard, fetchDashboard, activePageId]);\n\n // Handle paste widget from clipboard\n const handlePaste = useCallback(async () => {\n const pageId = activePageId ?? currentDashboard?.pages?.[0]?.id;\n if (!clipboardWidgetId || !dashboardId || !pageId) {\n return;\n }\n\n const sourceWidget = widgets.get(clipboardWidgetId);\n if (!sourceWidget) {\n clearClipboard();\n return;\n }\n\n // Use smart placement algorithm - horizontal first, then next row\n const widgetsArray = Array.from(widgets.values()).filter((widget) => widget.pageId === pageId);\n const widgetSize = {\n width: sourceWidget.positionWidth ?? 4,\n height: sourceWidget.positionHeight ?? 4,\n };\n\n const { x, y } = findNextAvailablePosition(widgetsArray, widgetSize, { cols: 12 });\n\n const newPosition = {\n x,\n y,\n width: widgetSize.width,\n height: widgetSize.height,\n };\n\n const newTitle = clipboardAction === 'copy' ? `${sourceWidget.title} (Copy)` : sourceWidget.title;\n\n // Try duplicateWidget API first. A null result intentionally falls through\n // to the create mutation for older backends without duplicate support.\n let newWidget = await duplicateWidgetMutation(clipboardWidgetId, newPosition, newTitle).catch(() => null);\n\n // Fallback: Create new widget with source widget's data\n if (!newWidget) {\n newWidget = await createWidgetMutation({\n pageId,\n dashboardId,\n type: sourceWidget.type,\n title: newTitle,\n description: sourceWidget.description,\n // v2.0: Use dataSinkId and parserId instead of dataSourceId/dataPath\n dataSinkId: sourceWidget.dataSinkId ?? undefined,\n datasetId: sourceWidget.datasetId ?? undefined,\n parserId: sourceWidget.parserId ?? undefined,\n parserRules: sourceWidget.parserRules ?? undefined,\n config: sourceWidget.config || {},\n position: newPosition,\n refreshInterval: sourceWidget.refreshInterval ?? undefined,\n metadata: sourceWidget.metadata,\n });\n }\n\n if (newWidget) {\n selectWidget(newWidget.id);\n\n // If cut action, delete the original widget from backend\n if (clipboardAction === 'cut') {\n await deleteWidgetMutation(clipboardWidgetId);\n }\n }\n\n clearClipboard();\n }, [\n clipboardWidgetId,\n clipboardAction,\n dashboardId,\n activePageId,\n currentDashboard,\n widgets,\n duplicateWidgetMutation,\n createWidgetMutation,\n deleteWidgetMutation,\n selectWidget,\n clearClipboard,\n ]);\n\n // Keyboard shortcuts for canvas editing. Each shortcut is backed by the exact\n // same operation the on-screen controls use, so no new state path is\n // introduced — Delete/⌫ removes the selected widget, ⌘/Ctrl+C/X copy/cut it,\n // ⌘/Ctrl+V pastes, Esc deselects. State is read fresh from the stores at\n // event time (not via closure) so a keypress right after selecting is never\n // stale. Typing in form fields and dialog/sheet surfaces is never hijacked.\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (useDashboardStore.getState().viewMode !== 'edit') return;\n\n // Never hijack text entry (including fields inside the docked panel).\n const target = e.target as HTMLElement | null;\n if (target?.closest('input, textarea, select, [contenteditable=\"true\"]')) {\n return;\n }\n // Don't act while a modal dialog is open (e.g. the Add Widget wizard,\n // which renders an overlay). The properties panel is a non-modal Sheet\n // with no overlay, so canvas shortcuts stay live while it is focused.\n if (document.querySelector('[data-slot=\"dialog-overlay\"]')) {\n return;\n }\n\n const widgetStore = useWidgetStore.getState();\n const selectedId = widgetStore.selectedWidgetId;\n\n if (e.key === 'Escape') {\n widgetStore.selectWidget(null);\n return;\n }\n\n if ((e.key === 'Delete' || e.key === 'Backspace') && selectedId) {\n e.preventDefault();\n void deleteWidgetMutation(selectedId);\n widgetStore.selectWidget(null);\n return;\n }\n\n if (!(e.metaKey || e.ctrlKey)) return;\n\n if (e.key === 'c' && selectedId) {\n widgetStore.copyWidget(selectedId);\n } else if (e.key === 'x' && selectedId) {\n widgetStore.cutWidget(selectedId);\n } else if (e.key === 'v') {\n e.preventDefault();\n void handlePaste();\n }\n };\n\n // Capture phase: the app shell and Radix also register document keydown\n // listeners; intercepting here keeps the builder's editing keys reliable.\n // Only the keys we handle are preventDefault-ed, so global shortcuts\n // (e.g. \"g a\" navigation) are left untouched.\n document.addEventListener('keydown', handleKeyDown, true);\n return () => document.removeEventListener('keydown', handleKeyDown, true);\n }, [deleteWidgetMutation, handlePaste]);\n\n // Navigate back to the dashboards list\n const handleBack = useCallback(() => {\n navigate('/dashboards');\n }, [navigate]);\n\n // Handle save - save dirty widgets and batch update positions\n const handleSave = useCallback(async () => {\n if (!dashboardId) return;\n\n setIsSaving(true);\n setSaveError(null);\n try {\n // Get the LATEST state directly from store (avoid stale closure)\n const storeState = useWidgetStore.getState();\n const currentWidgets = Array.from(storeState.widgets.values());\n const currentDirtyIds = storeState.dirtyWidgetIds;\n\n // Debug: Log dirty widget IDs\n\n // 1. Save dirty widgets (property changes like title, config, etc.)\n const dirtyWidgets = currentWidgets.filter((w) => currentDirtyIds.has(w.id));\n\n if (dirtyWidgets.length > 0) {\n // Save each dirty widget\n const updatePromises = dirtyWidgets.map((widget) => {\n const updateInput = {\n id: widget.id,\n title: widget.title,\n config: widget.config,\n refreshInterval: widget.refreshInterval ?? undefined,\n // v2.0: Use dataSinkId and parserId instead of dataSourceId/dataPath\n dataSinkId: widget.dataSinkId ?? undefined,\n datasetId: widget.datasetId ?? undefined,\n parserId: widget.parserId ?? undefined,\n parserRules: widget.parserRules ?? undefined,\n };\n\n return updateWidgetMutation(updateInput);\n });\n\n await Promise.all(updatePromises);\n\n // Clear dirty flags after successful save\n storeState.clearAllDirty();\n }\n\n // 2. Batch update widget positions\n if (currentWidgets.length > 0) {\n const positionUpdates = currentWidgets.map((widget) => ({\n id: widget.id,\n position: widget.position || {\n x: widget.positionX ?? 0,\n y: widget.positionY ?? 0,\n width: widget.positionWidth ?? 4,\n height: widget.positionHeight ?? 4,\n },\n }));\n\n await batchUpdatePositions(positionUpdates);\n }\n\n // 3. Update dashboard metadata if needed\n if (currentDashboard) {\n await updateDashboard({\n id: dashboardId,\n name: currentDashboard.title,\n description: currentDashboard.description,\n });\n }\n } catch (error) {\n setSaveError(error instanceof Error ? error.message : 'Failed to save dashboard');\n } finally {\n setIsSaving(false);\n }\n }, [dashboardId, currentDashboard, updateWidgetMutation, batchUpdatePositions, updateDashboard]);\n\n // Handle export\n const handleExport = useCallback(() => {\n setIsExportDialogOpen(true);\n }, []);\n\n const handleExportClose = useCallback(() => {\n setIsExportDialogOpen(false);\n }, []);\n\n // ============================================================================\n // Page Management Callbacks\n // ============================================================================\n\n // Handle page selection\n const handlePageChange = useCallback((pageId: string) => {\n setActivePageId(pageId);\n }, []);\n\n // Handle adding a new page\n const handlePageAdd = useCallback(async () => {\n if (!currentDashboard || !dashboardId) return;\n\n const newPageCount = currentDashboard.pages.length + 1;\n const newPageName = `Page ${newPageCount}`;\n\n // Call GraphQL mutation to create page\n // Note: 'order' is not available for create - backend auto-assigns order\n const newPage = await createPageMutation({\n dashboardId,\n name: newPageName,\n });\n\n if (newPage) {\n // Update local state with the created page\n setCurrentDashboard({\n ...currentDashboard,\n pages: [\n ...currentDashboard.pages,\n {\n id: newPage.id,\n title: newPage.name,\n index: newPage.order,\n layoutConfig: newPage.layoutConfig || {},\n },\n ],\n });\n\n // Switch to the new page\n setActivePageId(newPage.id);\n }\n }, [currentDashboard, dashboardId, setCurrentDashboard, createPageMutation]);\n\n // Handle renaming a page\n const handlePageRename = useCallback(\n async (pageId: string, newName: string) => {\n if (!currentDashboard) return;\n\n // Call GraphQL mutation to update page\n const updatedPage = await updatePageMutation({\n id: pageId,\n name: newName,\n });\n\n if (updatedPage) {\n setCurrentDashboard({\n ...currentDashboard,\n pages: currentDashboard.pages.map((page) => (page.id === pageId ? { ...page, title: newName } : page)),\n });\n }\n },\n [currentDashboard, setCurrentDashboard, updatePageMutation]\n );\n\n // Handle duplicating a page\n const handlePageDuplicate = useCallback(\n async (pageId: string) => {\n if (!currentDashboard || !dashboardId) return;\n\n const sourcePage = currentDashboard.pages.find((p) => p.id === pageId);\n if (!sourcePage) return;\n\n // Call GraphQL mutation to create a copy of the page\n // Note: 'order' is not available for create - backend auto-assigns order\n // Note: 'layout' should be PageLayout enum ('GRID', 'FLEX', 'FREEFORM'), not layoutConfig object\n const newPage = await createPageMutation({\n dashboardId,\n name: `${sourcePage.title} (Copy)`,\n });\n\n if (newPage) {\n setCurrentDashboard({\n ...currentDashboard,\n pages: [\n ...currentDashboard.pages,\n {\n id: newPage.id,\n title: newPage.name,\n index: newPage.order,\n layoutConfig: newPage.layoutConfig || {},\n },\n ],\n });\n\n setActivePageId(newPage.id);\n }\n },\n [currentDashboard, dashboardId, setCurrentDashboard, createPageMutation]\n );\n\n // Handle deleting a page\n const handlePageDelete = useCallback(\n async (pageId: string) => {\n if (!currentDashboard || currentDashboard.pages.length <= 1) return;\n\n // Call GraphQL mutation to delete page\n const success = await deletePageMutation(pageId);\n\n if (success) {\n const updatedPages = currentDashboard.pages.filter((p) => p.id !== pageId).map((p, index) => ({ ...p, index }));\n\n setCurrentDashboard({\n ...currentDashboard,\n pages: updatedPages,\n });\n\n // Switch to first page if current page was deleted\n if (activePageId === pageId) {\n setActivePageId(updatedPages[0]?.id || null);\n }\n }\n },\n [currentDashboard, setCurrentDashboard, activePageId, deletePageMutation]\n );\n\n // Handle reordering pages\n const handlePagesReorder = useCallback(\n async (reorderedPages: DashboardPage[]) => {\n if (!currentDashboard || !dashboardId) return;\n\n // Update local state optimistically\n setCurrentDashboard({\n ...currentDashboard,\n pages: reorderedPages.map((page, index) => ({\n ...page,\n index,\n })),\n });\n\n // Call GraphQL mutation to persist the reorder\n const pageIds = reorderedPages.map((p) => p.id);\n await reorderPagesMutation(dashboardId, pageIds);\n },\n [currentDashboard, dashboardId, setCurrentDashboard, reorderPagesMutation]\n );\n\n // Show error state\n if (dashboardError) {\n return (\n <div className=\"flex flex-col items-center justify-center h-full p-6\">\n <div className=\"bg-status-error-bg border border-status-error-border rounded-lg p-4 max-w-md\">\n <h3 className=\"text-sm font-medium text-status-error-text\">Failed to load dashboard</h3>\n <p className=\"text-sm text-text-secondary mt-1\">{dashboardError.message}</p>\n <button\n type=\"button\"\n onClick={() => navigate('/dashboards')}\n className=\"mt-3 px-3 py-1.5 text-sm font-medium text-action-primary-fg bg-action-primary-bg hover:bg-action-primary-bgHover rounded-md\"\n >\n Back to Dashboards\n </button>\n </div>\n </div>\n );\n }\n\n // Show loading state\n if (dashboardLoading || !currentDashboard) {\n return (\n <div className=\"flex items-center justify-center h-full\">\n <div className=\"animate-spin w-8 h-8 border-4 border-action-primary-bg border-t-transparent rounded-full\" />\n </div>\n );\n }\n\n return (\n <DashboardEditorShell\n topbar={\n <BuilderTopbar\n title={currentDashboard.title || 'Untitled dashboard'}\n onBack={handleBack}\n actions={\n saveError ? (\n <span className=\"text-xs font-medium text-status-error-text\" role=\"alert\">\n {saveError}\n </span>\n ) : undefined\n }\n />\n }\n >\n <BuilderCanvas\n canvas={\n <DashboardCanvas\n dashboardId={currentDashboard.id}\n pageId={activePageId || currentDashboard.pages?.[0]?.id}\n title={currentDashboard.title}\n onPaste={handlePaste}\n onSave={handleSave}\n isSaving={isSaving}\n onExport={handleExport}\n // Page tabs props\n pages={currentDashboard.pages.map((page) => ({\n id: page.id,\n name: page.title || `Page ${(page.index ?? 0) + 1}`,\n order: page.index ?? 0,\n }))}\n activePageId={activePageId || currentDashboard.pages?.[0]?.id}\n onPageChange={handlePageChange}\n onPageAdd={handlePageAdd}\n onPageRename={handlePageRename}\n onPageDuplicate={handlePageDuplicate}\n onPageDelete={handlePageDelete}\n onPagesReorder={handlePagesReorder}\n showPageTabs={true}\n />\n }\n />\n\n <ExportDashboardDialog\n isOpen={isExportDialogOpen}\n dashboardId={currentDashboard.id}\n dashboardName={currentDashboard.title}\n onClose={handleExportClose}\n />\n </DashboardEditorShell>\n );\n});\n\nexport default DashboardBuilderPage;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAiBA,SAAS,IAAwB;AAC/B,KAAI;AACF,SACE,OAGA;SACI;AACN;;;AAIJ,SAAS,EAAuB,GAAY,GAAc;CACxD,IAAM,IAAW,GAAuB;AACxC,CAAI,GAAU,YACZ,EAAS,SAAS,GAAI,EAAK;;AAI/B,SAAS,EAAyB,GAAY;CAC5C,IAAM,IAAW,GAAuB;AACxC,CAAI,GAAU,cACZ,EAAS,WAAW,EAAG;;AAQ3B,IAAa,IAA2B,EAAK,WAAgC;CAC3E,IAAM,EAAE,mBAAgB,GAAoC,EACtD,IAAW,GAAuB,EAClC,CAAC,GAAU,KAAe,EAAS,GAAM,EACzC,CAAC,GAAW,KAAgB,EAAwB,KAAK,EACzD,CAAC,GAAoB,KAAyB,EAAS,GAAM,EAC7D,CAAC,GAAc,KAAmB,EAAwB,KAAK,EAG/D,EACJ,mBACA,oBACA,SAAS,GACT,OAAO,MACL,GAAwB,EAGtB,EACJ,cAAc,GACd,cAAc,GACd,cAAc,GACd,iBAAiB,GACjB,4BACE,EAAoB,KAAA,GAAW,EAAY,EAGzC,EACJ,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,cAAc,MACZ,GAAmB,EAGjB,IAAsB,GAAmB,MAAU,EAAM,oBAAoB,EAC7E,IAAmB,GAAmB,MAAU,EAAM,iBAAiB,EACvE,IAAc,GAAmB,MAAU,EAAM,YAAY,EAC7D,IAAe,GAAgB,MAAU,EAAM,aAAa,EAC5D,IAAU,GAAgB,MAAU,EAAM,QAAQ,EAClD,IAAoB,GAAgB,MAAU,EAAM,kBAAkB,EACtE,IAAkB,GAAgB,MAAU,EAAM,gBAAgB,EAClE,IAAiB,GAAgB,MAAU,EAAM,eAAe;AAStE,CANA,SACE,EAAY,OAAO,QACN,EAAY,OAAO,GAC/B,CAAC,EAAY,CAAC,EAGjB,QAAgB;AACd,MAAI,CAAC,GAAa;AAChB,KAAS,cAAc;AACvB;;AAmCF,SA/BA,EAAe,EAAY,CAAC,MAAM,MAAc;AAC9C,GAAI,KAaF,EAZoC;IAClC,GAAG;IACH,OAAO,EAAU;IACjB,aAAa,EAAU,eAAe;IACtC,OAAO,EAAU,MAAM,KAAK,GAAM,OAAW;KAC3C,GAAG;KACH,IAAI,EAAK;KACT,OAAO,EAAK,QAAQ;KACpB;KACA,cAAc,EAAK,gBAAgB,EAAE;KACtC,EAAE;IACJ,CACoC,EAEjC,EAAU,MAAM,SAAS,KAAK,CAAC,KACjC,EAAgB,EAAU,MAAM,GAAG,GAAG,EAIpC,EAAU,QACZ,EAAuB,GAAa,EAAU,KAAK,IAIrD,EAAS,cAAc;IAEzB,QAGW;AACX,GAAI,KACF,EAAyB,EAAY;;IAGxC;EAAC;EAAa;EAAU;EAAqB;EAAgB;EAAa,CAAC;CAG9E,IAAM,IAAc,EAAY,YAAY;EAC1C,IAAM,IAAS,KAAgB,GAAkB,QAAQ,IAAI;AAC7D,MAAI,CAAC,KAAqB,CAAC,KAAe,CAAC,EACzC;EAGF,IAAM,IAAe,EAAQ,IAAI,EAAkB;AACnD,MAAI,CAAC,GAAc;AACjB,MAAgB;AAChB;;EAIF,IAAM,IAAe,MAAM,KAAK,EAAQ,QAAQ,CAAC,CAAC,QAAQ,MAAW,EAAO,WAAW,EAAO,EACxF,IAAa;GACjB,OAAO,EAAa,iBAAiB;GACrC,QAAQ,EAAa,kBAAkB;GACxC,EAEK,EAAE,MAAG,SAAM,EAA0B,GAAc,GAAY,EAAE,MAAM,IAAI,CAAC,EAE5E,IAAc;GAClB;GACA;GACA,OAAO,EAAW;GAClB,QAAQ,EAAW;GACpB,EAEK,IAAW,MAAoB,SAAS,GAAG,EAAa,MAAM,WAAW,EAAa,OAIxF,IAAY,MAAM,EAAwB,GAAmB,GAAa,EAAS,CAAC,YAAY,KAAK;AA+BzG,EA5BA,AACE,MAAY,MAAM,EAAqB;GACrC;GACA;GACA,MAAM,EAAa;GACnB,OAAO;GACP,aAAa,EAAa;GAE1B,YAAY,EAAa,cAAc,KAAA;GACvC,WAAW,EAAa,aAAa,KAAA;GACrC,UAAU,EAAa,YAAY,KAAA;GACnC,aAAa,EAAa,eAAe,KAAA;GACzC,QAAQ,EAAa,UAAU,EAAE;GACjC,UAAU;GACV,iBAAiB,EAAa,mBAAmB,KAAA;GACjD,UAAU,EAAa;GACxB,CAAC,EAGA,MACF,EAAa,EAAU,GAAG,EAGtB,MAAoB,SACtB,MAAM,EAAqB,EAAkB,GAIjD,GAAgB;IACf;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAQF,SAAgB;EACd,IAAM,KAAiB,MAAqB;AAW1C,OAVI,EAAkB,UAAU,CAAC,aAAa,UAG/B,EAAE,QACL,QAAQ,sDAAoD,IAMpE,SAAS,cAAc,iCAA+B,CACxD;GAGF,IAAM,IAAc,EAAe,UAAU,EACvC,IAAa,EAAY;AAE/B,OAAI,EAAE,QAAQ,UAAU;AACtB,MAAY,aAAa,KAAK;AAC9B;;AAGF,QAAK,EAAE,QAAQ,YAAY,EAAE,QAAQ,gBAAgB,GAAY;AAG/D,IAFA,EAAE,gBAAgB,EACb,EAAqB,EAAW,EACrC,EAAY,aAAa,KAAK;AAC9B;;AAGI,MAAE,WAAW,EAAE,aAEjB,EAAE,QAAQ,OAAO,IACnB,EAAY,WAAW,EAAW,GACzB,EAAE,QAAQ,OAAO,IAC1B,EAAY,UAAU,EAAW,GACxB,EAAE,QAAQ,QACnB,EAAE,gBAAgB,EACb,GAAa;;AAStB,SADA,SAAS,iBAAiB,WAAW,GAAe,GAAK,QAC5C,SAAS,oBAAoB,WAAW,GAAe,GAAK;IACxE,CAAC,GAAsB,EAAY,CAAC;CAGvC,IAAM,IAAa,QAAkB;AACnC,IAAS,cAAc;IACtB,CAAC,EAAS,CAAC,EAGR,IAAa,EAAY,YAAY;AACpC,SAGL;GADA,EAAY,GAAK,EACjB,EAAa,KAAK;AAClB,OAAI;IAEF,IAAM,IAAa,EAAe,UAAU,EACtC,IAAiB,MAAM,KAAK,EAAW,QAAQ,QAAQ,CAAC,EACxD,IAAkB,EAAW,gBAK7B,IAAe,EAAe,QAAQ,MAAM,EAAgB,IAAI,EAAE,GAAG,CAAC;AAE5E,QAAI,EAAa,SAAS,GAAG;KAE3B,IAAM,IAAiB,EAAa,KAAK,MAahC,EAZa;MAClB,IAAI,EAAO;MACX,OAAO,EAAO;MACd,QAAQ,EAAO;MACf,iBAAiB,EAAO,mBAAmB,KAAA;MAE3C,YAAY,EAAO,cAAc,KAAA;MACjC,WAAW,EAAO,aAAa,KAAA;MAC/B,UAAU,EAAO,YAAY,KAAA;MAC7B,aAAa,EAAO,eAAe,KAAA;MACpC,CAEuC,CACxC;AAKF,KAHA,MAAM,QAAQ,IAAI,EAAe,EAGjC,EAAW,eAAe;;AAmB5B,IAfI,EAAe,SAAS,KAW1B,MAAM,EAVkB,EAAe,KAAK,OAAY;KACtD,IAAI,EAAO;KACX,UAAU,EAAO,YAAY;MAC3B,GAAG,EAAO,aAAa;MACvB,GAAG,EAAO,aAAa;MACvB,OAAO,EAAO,iBAAiB;MAC/B,QAAQ,EAAO,kBAAkB;MAClC;KACF,EAAE,CAEwC,EAIzC,KACF,MAAM,EAAgB;KACpB,IAAI;KACJ,MAAM,EAAiB;KACvB,aAAa,EAAiB;KAC/B,CAAC;YAEG,GAAO;AACd,MAAa,aAAiB,QAAQ,EAAM,UAAU,2BAA2B;aACzE;AACR,MAAY,GAAM;;;IAEnB;EAAC;EAAa;EAAkB;EAAsB;EAAsB;EAAgB,CAAC,EAG1F,KAAe,QAAkB;AACrC,IAAsB,GAAK;IAC1B,EAAE,CAAC,EAEA,KAAoB,QAAkB;AAC1C,IAAsB,GAAM;IAC3B,EAAE,CAAC,EAOA,KAAmB,GAAa,MAAmB;AACvD,IAAgB,EAAO;IACtB,EAAE,CAAC,EAGA,KAAgB,EAAY,YAAY;AAC5C,MAAI,CAAC,KAAoB,CAAC,EAAa;EAOvC,IAAM,IAAU,MAAM,EAAmB;GACvC;GACA,MANkB,QADC,EAAiB,MAAM,SAAS;GAQpD,CAAC;AAEF,EAAI,MAEF,EAAoB;GAClB,GAAG;GACH,OAAO,CACL,GAAG,EAAiB,OACpB;IACE,IAAI,EAAQ;IACZ,OAAO,EAAQ;IACf,OAAO,EAAQ;IACf,cAAc,EAAQ,gBAAgB,EAAE;IACzC,CACF;GACF,CAAC,EAGF,EAAgB,EAAQ,GAAG;IAE5B;EAAC;EAAkB;EAAa;EAAqB;EAAmB,CAAC,EAGtE,KAAmB,EACvB,OAAO,GAAgB,MAAoB;AACpC,OAGe,MAAM,EAAmB;GAC3C,IAAI;GACJ,MAAM;GACP,CAAC,IAGA,EAAoB;GAClB,GAAG;GACH,OAAO,EAAiB,MAAM,KAAK,MAAU,EAAK,OAAO,IAAS;IAAE,GAAG;IAAM,OAAO;IAAS,GAAG,EAAM;GACvG,CAAC;IAGN;EAAC;EAAkB;EAAqB;EAAmB,CAC5D,EAGK,KAAsB,EAC1B,OAAO,MAAmB;AACxB,MAAI,CAAC,KAAoB,CAAC,EAAa;EAEvC,IAAM,IAAa,EAAiB,MAAM,MAAM,MAAM,EAAE,OAAO,EAAO;AACtE,MAAI,CAAC,EAAY;EAKjB,IAAM,IAAU,MAAM,EAAmB;GACvC;GACA,MAAM,GAAG,EAAW,MAAM;GAC3B,CAAC;AAEF,EAAI,MACF,EAAoB;GAClB,GAAG;GACH,OAAO,CACL,GAAG,EAAiB,OACpB;IACE,IAAI,EAAQ;IACZ,OAAO,EAAQ;IACf,OAAO,EAAQ;IACf,cAAc,EAAQ,gBAAgB,EAAE;IACzC,CACF;GACF,CAAC,EAEF,EAAgB,EAAQ,GAAG;IAG/B;EAAC;EAAkB;EAAa;EAAqB;EAAmB,CACzE,EAGK,KAAmB,EACvB,OAAO,MAAmB;AACpB,SAAC,KAAoB,EAAiB,MAAM,UAAU,MAG1C,MAAM,EAAmB,EAAO,EAEnC;GACX,IAAM,IAAe,EAAiB,MAAM,QAAQ,MAAM,EAAE,OAAO,EAAO,CAAC,KAAK,GAAG,OAAW;IAAE,GAAG;IAAG;IAAO,EAAE;AAQ/G,GANA,EAAoB;IAClB,GAAG;IACH,OAAO;IACR,CAAC,EAGE,MAAiB,KACnB,EAAgB,EAAa,IAAI,MAAM,KAAK;;IAIlD;EAAC;EAAkB;EAAqB;EAAc;EAAmB,CAC1E,EAGK,KAAqB,EACzB,OAAO,MAAoC;AACrC,GAAC,KAAoB,CAAC,MAG1B,EAAoB;GAClB,GAAG;GACH,OAAO,EAAe,KAAK,GAAM,OAAW;IAC1C,GAAG;IACH;IACD,EAAE;GACJ,CAAC,EAIF,MAAM,EAAqB,GADX,EAAe,KAAK,MAAM,EAAE,GAAG,CACC;IAElD;EAAC;EAAkB;EAAa;EAAqB;EAAqB,CAC3E;AA8BD,QA3BI,IAEA,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,MAAD;KAAI,WAAU;eAA6C;KAA6B,CAAA;IACxF,kBAAC,KAAD;KAAG,WAAU;eAAoC,EAAe;KAAY,CAAA;IAC5E,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAS,cAAc;KACtC,WAAU;eACX;KAEQ,CAAA;IACL;;EACF,CAAA,GAKN,KAAoB,CAAC,IAErB,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD,EAAK,WAAU,4FAA6F,CAAA;EACxG,CAAA,GAKR,kBAAC,GAAD;EACE,QACE,kBAAC,GAAD;GACE,OAAO,EAAiB,SAAS;GACjC,QAAQ;GACR,SACE,IACE,kBAAC,QAAD;IAAM,WAAU;IAA6C,MAAK;cAC/D;IACI,CAAA,GACL,KAAA;GAEN,CAAA;YAZN,CAeE,kBAAC,GAAD,EACE,QACE,kBAAC,GAAD;GACE,aAAa,EAAiB;GAC9B,QAAQ,KAAgB,EAAiB,QAAQ,IAAI;GACrD,OAAO,EAAiB;GACxB,SAAS;GACT,QAAQ;GACE;GACV,UAAU;GAEV,OAAO,EAAiB,MAAM,KAAK,OAAU;IAC3C,IAAI,EAAK;IACT,MAAM,EAAK,SAAS,SAAS,EAAK,SAAS,KAAK;IAChD,OAAO,EAAK,SAAS;IACtB,EAAE;GACH,cAAc,KAAgB,EAAiB,QAAQ,IAAI;GAC3D,cAAc;GACd,WAAW;GACX,cAAc;GACd,iBAAiB;GACjB,cAAc;GACd,gBAAgB;GAChB,cAAc;GACd,CAAA,EAEJ,CAAA,EAEF,kBAAC,GAAD;GACE,QAAQ;GACR,aAAa,EAAiB;GAC9B,eAAe,EAAiB;GAChC,SAAS;GACT,CAAA,CACmB;;EAEzB"}
|
|
1
|
+
{"version":3,"file":"DashboardBuilderPage.js","names":[],"sources":["../../../src/bigconsole/pages/DashboardBuilderPage.tsx"],"sourcesContent":["/**\n * DashboardBuilderPage\n *\n * Full dashboard builder experience with side panels.\n */\n\nimport { type FC, memo, useState, useEffect, useCallback } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { useBigConsoleNavigate } from '../context';\nimport { DashboardCanvas, ExportDashboardDialog } from '../components/dashboard';\nimport { BuilderCanvas, BuilderTopbar, DashboardEditorShell } from '../components/builder';\nimport { useDashboardStore, useWidgetStore } from '../store';\nimport { useDashboardOperations, useWidgetOperations, usePageOperations } from '../hooks';\nimport { CustomWidgetBuilderSheet } from '../customWidget';\nimport type { Dashboard, DashboardPage } from '../types';\nimport { findNextAvailablePosition } from '../utils/widgetPositioning';\n\n// Breadcrumb name registration helpers (get from shell at call time to avoid timing issues)\nfunction getBreadcrumbRegistry() {\n try {\n return (\n window as unknown as {\n __breadcrumbRegistry?: { register: (id: string, name: string) => void; unregister: (id: string) => void };\n }\n ).__breadcrumbRegistry;\n } catch {\n return undefined;\n }\n}\n\nfunction registerBreadcrumbName(id: string, name: string) {\n const registry = getBreadcrumbRegistry();\n if (registry?.register) {\n registry.register(id, name);\n }\n}\n\nfunction unregisterBreadcrumbName(id: string) {\n const registry = getBreadcrumbRegistry();\n if (registry?.unregister) {\n registry.unregister(id);\n }\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DashboardBuilderPage: FC = memo(function DashboardBuilderPage() {\n const { dashboardId } = useParams<{ dashboardId: string }>();\n const navigate = useBigConsoleNavigate();\n const [isSaving, setIsSaving] = useState(false);\n const [saveError, setSaveError] = useState<string | null>(null);\n const [isExportDialogOpen, setIsExportDialogOpen] = useState(false);\n // BOFF-5532: AI custom-widget authoring/review surface.\n const [isCustomWidgetBuilderOpen, setIsCustomWidgetBuilderOpen] = useState(false);\n const [activePageId, setActivePageId] = useState<string | null>(null);\n\n // Dashboard operations from GraphQL\n const {\n fetchDashboard,\n updateDashboard,\n loading: dashboardLoading,\n error: dashboardError,\n } = useDashboardOperations();\n\n // Widget operations from GraphQL\n const {\n createWidget: createWidgetMutation,\n updateWidget: updateWidgetMutation,\n deleteWidget: deleteWidgetMutation,\n duplicateWidget: duplicateWidgetMutation,\n batchUpdatePositions,\n } = useWidgetOperations(undefined, dashboardId);\n\n // Page operations from GraphQL\n const {\n createPage: createPageMutation,\n updatePage: updatePageMutation,\n deletePage: deletePageMutation,\n reorderPages: reorderPagesMutation,\n } = usePageOperations();\n\n // Store actions\n const setCurrentDashboard = useDashboardStore((state) => state.setCurrentDashboard);\n const currentDashboard = useDashboardStore((state) => state.currentDashboard);\n const setViewMode = useDashboardStore((state) => state.setViewMode);\n const selectWidget = useWidgetStore((state) => state.selectWidget);\n const widgets = useWidgetStore((state) => state.widgets);\n const clipboardWidgetId = useWidgetStore((state) => state.clipboardWidgetId);\n const clipboardAction = useWidgetStore((state) => state.clipboardAction);\n const clearClipboard = useWidgetStore((state) => state.clearClipboard);\n\n // Set edit mode on mount\n useEffect(() => {\n setViewMode('edit');\n return () => setViewMode('view');\n }, [setViewMode]);\n\n // Load dashboard data from API\n useEffect(() => {\n if (!dashboardId) {\n navigate('/dashboards');\n return;\n }\n\n // Fetch dashboard from API\n fetchDashboard(dashboardId).then((dashboard) => {\n if (dashboard) {\n const builderDashboard: Dashboard = {\n ...dashboard,\n title: dashboard.name,\n description: dashboard.description ?? '',\n pages: dashboard.pages.map((page, index) => ({\n ...page,\n id: page.id,\n title: page.name ?? '',\n index,\n layoutConfig: page.layoutConfig ?? {},\n })),\n };\n setCurrentDashboard(builderDashboard);\n // Set active page to first page\n if (dashboard.pages.length > 0 && !activePageId) {\n setActivePageId(dashboard.pages[0].id);\n }\n\n // Register dashboard name for breadcrumb display\n if (dashboard.name) {\n registerBreadcrumbName(dashboardId, dashboard.name);\n }\n } else {\n // Dashboard not found, redirect\n navigate('/dashboards');\n }\n });\n\n // Cleanup: unregister breadcrumb name on unmount\n return () => {\n if (dashboardId) {\n unregisterBreadcrumbName(dashboardId);\n }\n };\n }, [dashboardId, navigate, setCurrentDashboard, fetchDashboard, activePageId]);\n\n // Handle paste widget from clipboard\n const handlePaste = useCallback(async () => {\n const pageId = activePageId ?? currentDashboard?.pages?.[0]?.id;\n if (!clipboardWidgetId || !dashboardId || !pageId) {\n return;\n }\n\n const sourceWidget = widgets.get(clipboardWidgetId);\n if (!sourceWidget) {\n clearClipboard();\n return;\n }\n\n // Use smart placement algorithm - horizontal first, then next row\n const widgetsArray = Array.from(widgets.values()).filter((widget) => widget.pageId === pageId);\n const widgetSize = {\n width: sourceWidget.positionWidth ?? 4,\n height: sourceWidget.positionHeight ?? 4,\n };\n\n const { x, y } = findNextAvailablePosition(widgetsArray, widgetSize, { cols: 12 });\n\n const newPosition = {\n x,\n y,\n width: widgetSize.width,\n height: widgetSize.height,\n };\n\n const newTitle = clipboardAction === 'copy' ? `${sourceWidget.title} (Copy)` : sourceWidget.title;\n\n // Try duplicateWidget API first. A null result intentionally falls through\n // to the create mutation for older backends without duplicate support.\n let newWidget = await duplicateWidgetMutation(clipboardWidgetId, newPosition, newTitle).catch(() => null);\n\n // Fallback: Create new widget with source widget's data\n if (!newWidget) {\n newWidget = await createWidgetMutation({\n pageId,\n dashboardId,\n type: sourceWidget.type,\n title: newTitle,\n description: sourceWidget.description,\n // v2.0: Use dataSinkId and parserId instead of dataSourceId/dataPath\n dataSinkId: sourceWidget.dataSinkId ?? undefined,\n datasetId: sourceWidget.datasetId ?? undefined,\n parserId: sourceWidget.parserId ?? undefined,\n parserRules: sourceWidget.parserRules ?? undefined,\n config: sourceWidget.config || {},\n position: newPosition,\n refreshInterval: sourceWidget.refreshInterval ?? undefined,\n metadata: sourceWidget.metadata,\n });\n }\n\n if (newWidget) {\n selectWidget(newWidget.id);\n\n // If cut action, delete the original widget from backend\n if (clipboardAction === 'cut') {\n await deleteWidgetMutation(clipboardWidgetId);\n }\n }\n\n clearClipboard();\n }, [\n clipboardWidgetId,\n clipboardAction,\n dashboardId,\n activePageId,\n currentDashboard,\n widgets,\n duplicateWidgetMutation,\n createWidgetMutation,\n deleteWidgetMutation,\n selectWidget,\n clearClipboard,\n ]);\n\n // Keyboard shortcuts for canvas editing. Each shortcut is backed by the exact\n // same operation the on-screen controls use, so no new state path is\n // introduced — Delete/⌫ removes the selected widget, ⌘/Ctrl+C/X copy/cut it,\n // ⌘/Ctrl+V pastes, Esc deselects. State is read fresh from the stores at\n // event time (not via closure) so a keypress right after selecting is never\n // stale. Typing in form fields and dialog/sheet surfaces is never hijacked.\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (useDashboardStore.getState().viewMode !== 'edit') return;\n\n // Never hijack text entry (including fields inside the docked panel).\n const target = e.target as HTMLElement | null;\n if (target?.closest('input, textarea, select, [contenteditable=\"true\"]')) {\n return;\n }\n // Don't act while a modal dialog is open (e.g. the Add Widget wizard,\n // which renders an overlay). The properties panel is a non-modal Sheet\n // with no overlay, so canvas shortcuts stay live while it is focused.\n if (document.querySelector('[data-slot=\"dialog-overlay\"]')) {\n return;\n }\n\n const widgetStore = useWidgetStore.getState();\n const selectedId = widgetStore.selectedWidgetId;\n\n if (e.key === 'Escape') {\n widgetStore.selectWidget(null);\n return;\n }\n\n if ((e.key === 'Delete' || e.key === 'Backspace') && selectedId) {\n e.preventDefault();\n void deleteWidgetMutation(selectedId);\n widgetStore.selectWidget(null);\n return;\n }\n\n if (!(e.metaKey || e.ctrlKey)) return;\n\n if (e.key === 'c' && selectedId) {\n widgetStore.copyWidget(selectedId);\n } else if (e.key === 'x' && selectedId) {\n widgetStore.cutWidget(selectedId);\n } else if (e.key === 'v') {\n e.preventDefault();\n void handlePaste();\n }\n };\n\n // Capture phase: the app shell and Radix also register document keydown\n // listeners; intercepting here keeps the builder's editing keys reliable.\n // Only the keys we handle are preventDefault-ed, so global shortcuts\n // (e.g. \"g a\" navigation) are left untouched.\n document.addEventListener('keydown', handleKeyDown, true);\n return () => document.removeEventListener('keydown', handleKeyDown, true);\n }, [deleteWidgetMutation, handlePaste]);\n\n // Navigate back to the dashboards list\n const handleBack = useCallback(() => {\n navigate('/dashboards');\n }, [navigate]);\n\n // Handle save - save dirty widgets and batch update positions\n const handleSave = useCallback(async () => {\n if (!dashboardId) return;\n\n setIsSaving(true);\n setSaveError(null);\n try {\n // Get the LATEST state directly from store (avoid stale closure)\n const storeState = useWidgetStore.getState();\n const currentWidgets = Array.from(storeState.widgets.values());\n const currentDirtyIds = storeState.dirtyWidgetIds;\n\n // Debug: Log dirty widget IDs\n\n // 1. Save dirty widgets (property changes like title, config, etc.)\n const dirtyWidgets = currentWidgets.filter((w) => currentDirtyIds.has(w.id));\n\n if (dirtyWidgets.length > 0) {\n // Save each dirty widget\n const updatePromises = dirtyWidgets.map((widget) => {\n const updateInput = {\n id: widget.id,\n title: widget.title,\n config: widget.config,\n refreshInterval: widget.refreshInterval ?? undefined,\n // v2.0: Use dataSinkId and parserId instead of dataSourceId/dataPath\n dataSinkId: widget.dataSinkId ?? undefined,\n datasetId: widget.datasetId ?? undefined,\n parserId: widget.parserId ?? undefined,\n parserRules: widget.parserRules ?? undefined,\n };\n\n return updateWidgetMutation(updateInput);\n });\n\n await Promise.all(updatePromises);\n\n // Clear dirty flags after successful save\n storeState.clearAllDirty();\n }\n\n // 2. Batch update widget positions\n if (currentWidgets.length > 0) {\n const positionUpdates = currentWidgets.map((widget) => ({\n id: widget.id,\n position: widget.position || {\n x: widget.positionX ?? 0,\n y: widget.positionY ?? 0,\n width: widget.positionWidth ?? 4,\n height: widget.positionHeight ?? 4,\n },\n }));\n\n await batchUpdatePositions(positionUpdates);\n }\n\n // 3. Update dashboard metadata if needed\n if (currentDashboard) {\n await updateDashboard({\n id: dashboardId,\n name: currentDashboard.title,\n description: currentDashboard.description,\n });\n }\n } catch (error) {\n setSaveError(error instanceof Error ? error.message : 'Failed to save dashboard');\n } finally {\n setIsSaving(false);\n }\n }, [dashboardId, currentDashboard, updateWidgetMutation, batchUpdatePositions, updateDashboard]);\n\n // Handle export\n const handleExport = useCallback(() => {\n setIsExportDialogOpen(true);\n }, []);\n\n const handleExportClose = useCallback(() => {\n setIsExportDialogOpen(false);\n }, []);\n\n // ============================================================================\n // Page Management Callbacks\n // ============================================================================\n\n // Handle page selection\n const handlePageChange = useCallback((pageId: string) => {\n setActivePageId(pageId);\n }, []);\n\n // Handle adding a new page\n const handlePageAdd = useCallback(async () => {\n if (!currentDashboard || !dashboardId) return;\n\n const newPageCount = currentDashboard.pages.length + 1;\n const newPageName = `Page ${newPageCount}`;\n\n // Call GraphQL mutation to create page\n // Note: 'order' is not available for create - backend auto-assigns order\n const newPage = await createPageMutation({\n dashboardId,\n name: newPageName,\n });\n\n if (newPage) {\n // Update local state with the created page\n setCurrentDashboard({\n ...currentDashboard,\n pages: [\n ...currentDashboard.pages,\n {\n id: newPage.id,\n title: newPage.name,\n index: newPage.order,\n layoutConfig: newPage.layoutConfig || {},\n },\n ],\n });\n\n // Switch to the new page\n setActivePageId(newPage.id);\n }\n }, [currentDashboard, dashboardId, setCurrentDashboard, createPageMutation]);\n\n // Handle renaming a page\n const handlePageRename = useCallback(\n async (pageId: string, newName: string) => {\n if (!currentDashboard) return;\n\n // Call GraphQL mutation to update page\n const updatedPage = await updatePageMutation({\n id: pageId,\n name: newName,\n });\n\n if (updatedPage) {\n setCurrentDashboard({\n ...currentDashboard,\n pages: currentDashboard.pages.map((page) => (page.id === pageId ? { ...page, title: newName } : page)),\n });\n }\n },\n [currentDashboard, setCurrentDashboard, updatePageMutation]\n );\n\n // Handle duplicating a page\n const handlePageDuplicate = useCallback(\n async (pageId: string) => {\n if (!currentDashboard || !dashboardId) return;\n\n const sourcePage = currentDashboard.pages.find((p) => p.id === pageId);\n if (!sourcePage) return;\n\n // Call GraphQL mutation to create a copy of the page\n // Note: 'order' is not available for create - backend auto-assigns order\n // Note: 'layout' should be PageLayout enum ('GRID', 'FLEX', 'FREEFORM'), not layoutConfig object\n const newPage = await createPageMutation({\n dashboardId,\n name: `${sourcePage.title} (Copy)`,\n });\n\n if (newPage) {\n setCurrentDashboard({\n ...currentDashboard,\n pages: [\n ...currentDashboard.pages,\n {\n id: newPage.id,\n title: newPage.name,\n index: newPage.order,\n layoutConfig: newPage.layoutConfig || {},\n },\n ],\n });\n\n setActivePageId(newPage.id);\n }\n },\n [currentDashboard, dashboardId, setCurrentDashboard, createPageMutation]\n );\n\n // Handle deleting a page\n const handlePageDelete = useCallback(\n async (pageId: string) => {\n if (!currentDashboard || currentDashboard.pages.length <= 1) return;\n\n // Call GraphQL mutation to delete page\n const success = await deletePageMutation(pageId);\n\n if (success) {\n const updatedPages = currentDashboard.pages.filter((p) => p.id !== pageId).map((p, index) => ({ ...p, index }));\n\n setCurrentDashboard({\n ...currentDashboard,\n pages: updatedPages,\n });\n\n // Switch to first page if current page was deleted\n if (activePageId === pageId) {\n setActivePageId(updatedPages[0]?.id || null);\n }\n }\n },\n [currentDashboard, setCurrentDashboard, activePageId, deletePageMutation]\n );\n\n // Handle reordering pages\n const handlePagesReorder = useCallback(\n async (reorderedPages: DashboardPage[]) => {\n if (!currentDashboard || !dashboardId) return;\n\n // Update local state optimistically\n setCurrentDashboard({\n ...currentDashboard,\n pages: reorderedPages.map((page, index) => ({\n ...page,\n index,\n })),\n });\n\n // Call GraphQL mutation to persist the reorder\n const pageIds = reorderedPages.map((p) => p.id);\n await reorderPagesMutation(dashboardId, pageIds);\n },\n [currentDashboard, dashboardId, setCurrentDashboard, reorderPagesMutation]\n );\n\n // Show error state\n if (dashboardError) {\n return (\n <div className=\"flex flex-col items-center justify-center h-full p-6\">\n <div className=\"bg-status-error-bg border border-status-error-border rounded-lg p-4 max-w-md\">\n <h3 className=\"text-sm font-medium text-status-error-text\">Failed to load dashboard</h3>\n <p className=\"text-sm text-text-secondary mt-1\">{dashboardError.message}</p>\n <button\n type=\"button\"\n onClick={() => navigate('/dashboards')}\n className=\"mt-3 px-3 py-1.5 text-sm font-medium text-action-primary-fg bg-action-primary-bg hover:bg-action-primary-bgHover rounded-md\"\n >\n Back to Dashboards\n </button>\n </div>\n </div>\n );\n }\n\n // Show loading state\n if (dashboardLoading || !currentDashboard) {\n return (\n <div className=\"flex items-center justify-center h-full\">\n <div className=\"animate-spin w-8 h-8 border-4 border-action-primary-bg border-t-transparent rounded-full\" />\n </div>\n );\n }\n\n return (\n <DashboardEditorShell\n topbar={\n <BuilderTopbar\n title={currentDashboard.title || 'Untitled dashboard'}\n onBack={handleBack}\n actions={\n <div className=\"flex items-center gap-2\">\n {saveError ? (\n <span className=\"text-xs font-medium text-status-error-text\" role=\"alert\">\n {saveError}\n </span>\n ) : null}\n <button\n type=\"button\"\n data-testid=\"open-custom-widget-builder\"\n onClick={() => setIsCustomWidgetBuilderOpen(true)}\n className=\"rounded-md border border-border-default px-2 py-1 text-xs font-medium text-text-primary hover:bg-bg-sunken focus:outline-none focus-visible:ring-2 focus-visible:ring-action-primary-bg\"\n >\n AI widget\n </button>\n </div>\n }\n />\n }\n >\n <BuilderCanvas\n canvas={\n <DashboardCanvas\n dashboardId={currentDashboard.id}\n pageId={activePageId || currentDashboard.pages?.[0]?.id}\n title={currentDashboard.title}\n onPaste={handlePaste}\n onSave={handleSave}\n isSaving={isSaving}\n onExport={handleExport}\n // Page tabs props\n pages={currentDashboard.pages.map((page) => ({\n id: page.id,\n name: page.title || `Page ${(page.index ?? 0) + 1}`,\n order: page.index ?? 0,\n }))}\n activePageId={activePageId || currentDashboard.pages?.[0]?.id}\n onPageChange={handlePageChange}\n onPageAdd={handlePageAdd}\n onPageRename={handlePageRename}\n onPageDuplicate={handlePageDuplicate}\n onPageDelete={handlePageDelete}\n onPagesReorder={handlePagesReorder}\n showPageTabs={true}\n />\n }\n />\n\n <ExportDashboardDialog\n isOpen={isExportDialogOpen}\n dashboardId={currentDashboard.id}\n dashboardName={currentDashboard.title}\n onClose={handleExportClose}\n />\n\n <CustomWidgetBuilderSheet\n isOpen={isCustomWidgetBuilderOpen}\n onClose={() => setIsCustomWidgetBuilderOpen(false)}\n dashboardId={currentDashboard.id}\n pageId={activePageId || currentDashboard.pages?.[0]?.id || ''}\n />\n </DashboardEditorShell>\n );\n});\n\nexport default DashboardBuilderPage;\n"],"mappings":"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"}
|