@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

package/dist/bigconsole/pages/DashboardBuilderPage.js.map

@@ -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';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { AccessDenied } from '@burdenoff/fe-libs/shared/components';\nimport { BIGCONSOLE_PERMISSIONS } from '../../constants/permissions';\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 { t } = useI18n();\n\n  // RBAC gating. The builder is the edit surface: a read gate blocks it for\n  // callers without dashboard read access, and action gates hide Save/Export and\n  // the AI-widget (widget-create) control for callers lacking those permissions.\n  const { hasPermission, isLoading: permissionsLoading } = usePermissions();\n  const canRead = hasPermission(BIGCONSOLE_PERMISSIONS.DASHBOARD_READ);\n  const canUpdate = hasPermission(BIGCONSOLE_PERMISSIONS.DASHBOARD_UPDATE);\n  const canExport = hasPermission(BIGCONSOLE_PERMISSIONS.DASHBOARD_EXPORT);\n  const canCreateWidget = hasPermission(BIGCONSOLE_PERMISSIONS.WIDGET_CREATE);\n\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 =\n      clipboardAction === 'copy'\n        ? t('bigconsole.dashboards.builder.actions.copySuffix', '{{title}} (Copy)', { title: sourceWidget.title })\n        : 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    t,\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(\n        error instanceof Error\n          ? error.message\n          : t('bigconsole.dashboards.builder.errors.saveFailed', 'Failed to save dashboard')\n      );\n    } finally {\n      setIsSaving(false);\n    }\n  }, [dashboardId, currentDashboard, updateWidgetMutation, batchUpdatePositions, updateDashboard, t]);\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 = t('bigconsole.dashboards.builder.actions.newPageName', 'Page {{count}}', {\n      count: newPageCount,\n    });\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, t]);\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: t('bigconsole.dashboards.builder.actions.copySuffix', '{{title}} (Copy)', {\n          title: sourcePage.title ?? '',\n        }),\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, t]\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  // Permission read gate — resolve the provider first, then block the builder\n  // for callers without dashboard read access. Kept ahead of error/loading\n  // returns so an unauthorized caller never reaches the edit surface.\n  if (permissionsLoading) {\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  if (!canRead) {\n    return (\n      <AccessDenied\n        title={t('bigconsole.dashboards.builder.errors.accessDeniedTitle', 'Access Denied')}\n        description={t(\n          'bigconsole.dashboards.builder.errors.accessDeniedDescription',\n          \"You don't have permission to view this dashboard.\"\n        )}\n      />\n    );\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\">\n            {t('bigconsole.dashboards.builder.errors.loadFailed', 'Failed to load dashboard')}\n          </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            {t('bigconsole.dashboards.builder.actions.backToDashboards', '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={\n            currentDashboard.title || t('bigconsole.dashboards.builder.header.untitledDashboard', 'Untitled dashboard')\n          }\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              {/* AI custom-widget authoring creates a widget → gate on WIDGET_CREATE. */}\n              {canCreateWidget ? (\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                  {t('bigconsole.dashboards.builder.toolbar.aiWidget', 'AI widget')}\n                </button>\n              ) : null}\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            // Gate action controls: DashboardToolbar renders each button only\n            // when its handler is defined, so passing undefined hides the\n            // control for callers lacking the permission.\n            onSave={canUpdate ? handleSave : undefined}\n            isSaving={isSaving}\n            onExport={canExport ? handleExport : undefined}\n            // Page tabs props\n            pages={currentDashboard.pages.map((page) => ({\n              id: page.id,\n              name:\n                page.title ||\n                t('bigconsole.dashboards.builder.actions.newPageName', 'Page {{count}}', {\n                  count: (page.index ?? 0) + 1,\n                }),\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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"}
+{"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';\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { AccessDenied } from '@burdenoff/fe-libs/shared/components';\nimport { BIGCONSOLE_PERMISSIONS } from '../../constants/permissions';\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 { SECTION_FOCUS_RING, Section } from '../components/common';\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 { t } = useI18n();\n\n  // RBAC gating. The builder is the edit surface: a read gate blocks it for\n  // callers without dashboard read access, and action gates hide Save/Export and\n  // the AI-widget (widget-create) control for callers lacking those permissions.\n  const { hasPermission, isLoading: permissionsLoading } = usePermissions();\n  const canRead = hasPermission(BIGCONSOLE_PERMISSIONS.DASHBOARD_READ);\n  const canUpdate = hasPermission(BIGCONSOLE_PERMISSIONS.DASHBOARD_UPDATE);\n  const canExport = hasPermission(BIGCONSOLE_PERMISSIONS.DASHBOARD_EXPORT);\n  const canCreateWidget = hasPermission(BIGCONSOLE_PERMISSIONS.WIDGET_CREATE);\n\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 =\n      clipboardAction === 'copy'\n        ? t('bigconsole.dashboards.builder.actions.copySuffix', '{{title}} (Copy)', { title: sourceWidget.title })\n        : 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    t,\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(\n        error instanceof Error\n          ? error.message\n          : t('bigconsole.dashboards.builder.errors.saveFailed', 'Failed to save dashboard')\n      );\n    } finally {\n      setIsSaving(false);\n    }\n  }, [dashboardId, currentDashboard, updateWidgetMutation, batchUpdatePositions, updateDashboard, t]);\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 = t('bigconsole.dashboards.builder.actions.newPageName', 'Page {{count}}', {\n      count: newPageCount,\n    });\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, t]);\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: t('bigconsole.dashboards.builder.actions.copySuffix', '{{title}} (Copy)', {\n          title: sourcePage.title ?? '',\n        }),\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, t]\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  // Permission read gate — resolve the provider first, then block the builder\n  // for callers without dashboard read access. Kept ahead of error/loading\n  // returns so an unauthorized caller never reaches the edit surface.\n  if (permissionsLoading) {\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  if (!canRead) {\n    return (\n      <AccessDenied\n        title={t('bigconsole.dashboards.builder.errors.accessDeniedTitle', 'Access Denied')}\n        description={t(\n          'bigconsole.dashboards.builder.errors.accessDeniedDescription',\n          \"You don't have permission to view this dashboard.\"\n        )}\n      />\n    );\n  }\n\n  // Show error state\n  if (dashboardError) {\n    return (\n      <div className=\"flex h-full flex-col items-center justify-center p-6\">\n        <Section\n          headingLevel={2}\n          tone=\"danger\"\n          title={t('bigconsole.dashboards.builder.errors.loadFailed', 'Failed to load dashboard')}\n          description={<span className=\"break-words\">{dashboardError.message}</span>}\n          className=\"w-full max-w-md\"\n          data-testid=\"dashboard-builder-error\"\n          actions={\n            <Button size=\"sm\" onClick={() => navigate('/dashboards')}>\n              {t('bigconsole.dashboards.builder.actions.backToDashboards', 'Back to Dashboards')}\n            </Button>\n          }\n        />\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\" role=\"status\" aria-live=\"polite\">\n        <div className=\"animate-spin w-8 h-8 border-4 border-action-primary-bg border-t-transparent rounded-full\" />\n        <span className=\"sr-only\">Loading dashboard…</span>\n      </div>\n    );\n  }\n\n  return (\n    <DashboardEditorShell\n      topbar={\n        <BuilderTopbar\n          title={\n            currentDashboard.title || t('bigconsole.dashboards.builder.header.untitledDashboard', 'Untitled dashboard')\n          }\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              {/* AI custom-widget authoring creates a widget → gate on WIDGET_CREATE. */}\n              {canCreateWidget ? (\n                <button\n                  type=\"button\"\n                  data-testid=\"open-custom-widget-builder\"\n                  onClick={() => setIsCustomWidgetBuilderOpen(true)}\n                  className={`inline-flex min-h-control-md items-center rounded-button border border-[var(--color-border-subtle)] px-2 py-1 text-xs font-medium text-text-primary motion-safe:transition-colors hover:bg-bg-sunken ${SECTION_FOCUS_RING}`}\n                >\n                  {t('bigconsole.dashboards.builder.toolbar.aiWidget', 'AI widget')}\n                </button>\n              ) : null}\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            // Gate action controls: DashboardToolbar renders each button only\n            // when its handler is defined, so passing undefined hides the\n            // control for callers lacking the permission.\n            onSave={canUpdate ? handleSave : undefined}\n            isSaving={isSaving}\n            onExport={canExport ? handleExport : undefined}\n            // Page tabs props\n            pages={currentDashboard.pages.map((page) => ({\n              id: page.id,\n              name:\n                page.title ||\n                t('bigconsole.dashboards.builder.actions.newPageName', 'Page {{count}}', {\n                  count: (page.index ?? 0) + 1,\n                }),\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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"}

package/dist/bigconsole/pages/DashboardViewPage.js

@@ -1,48 +1,50 @@
 import { useWidgetStore as e } from "../store/widgetStore.js";
 import { useDashboardStore as t } from "../store/dashboardStore.js";
 import "../store/index.js";
-import { useBigConsoleNavigate as n } from "../context/BigConsoleContext.js";
+import { Section as n } from "../components/common/Section.js";
+import "../components/common/index.js";
+import { useBigConsoleNavigate as r } from "../context/BigConsoleContext.js";
 import "../context/index.js";
-import r from "../hooks/useWidgetOperations.js";
-import i from "../hooks/useDashboardOperations.js";
+import i from "../hooks/useWidgetOperations.js";
+import a from "../hooks/useDashboardOperations.js";
 import ee from "../hooks/useFilterUrlSync.js";
 import te from "../hooks/usePageOperations.js";
 import "../hooks/index.js";
-import { BIGCONSOLE_PERMISSIONS as a } from "../../constants/permissions.js";
+import { BIGCONSOLE_PERMISSIONS as o } from "../../constants/permissions.js";
 import ne from "../components/dashboard/DashboardCanvas.js";
-import re from "../components/dashboard/LiveCanvasToggle.js";
-import o from "../components/dashboard/ExportDashboardDialog.js";
+import s from "../components/dashboard/LiveCanvasToggle.js";
+import re from "../components/dashboard/ExportDashboardDialog.js";
 import ie from "../components/dashboard/DrilldownBreadcrumb.js";
 import ae from "../components/dashboard/PublishToStoreDialog.js";
 import "../components/dashboard/index.js";
-import { memo as s, useCallback as c, useEffect as l, useRef as oe, useState as u } from "react";
+import { memo as c, useCallback as l, useEffect as u, useRef as oe, useState as d } from "react";
 import { useParams as se } from "react-router";
 import { AccessDenied as ce } from "@burdenoff/fe-libs/shared/components";
 import { usePermissions as le } from "@burdenoff/fe-libs/shared/providers/shell";
-import { ArrowLeft as d } from "lucide-react";
+import { ArrowLeft as ue } from "lucide-react";
 import { useI18n as f } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 import { Button as p, IllustratedEmptyState as m } from "@burdenoff/fe-libs/ui";
 import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/bigconsole/pages/DashboardViewPage.tsx
-var v = s(function() {
-	let { dashboardId: s } = se(), v = n(), { t: y } = f(), { hasPermission: b, isLoading: ue } = le(), de = b(a.DASHBOARD_READ), fe = b(a.DASHBOARD_UPDATE), pe = b(a.DASHBOARD_EXPORT), me = b(a.DASHBOARD_PUBLISH), [x, S] = u(null), [he, C] = u(!1), [ge, w] = u(!1), [_e, T] = u(!1), [E, ve] = u(!1), { isInDrilldown: D, getContextFromUrl: O, getDrilldownMetadata: k } = ee(), A = t((e) => e.currentDashboard), j = t((e) => e.setCurrentDashboard), M = t((e) => e.setGlobalFilterValue), N = t((e) => e.clearAllGlobalFilters), P = e((e) => e.widgets), F = e((e) => e.clipboardWidgetId), I = e((e) => e.clipboardAction), L = e((e) => e.clearClipboard), R = e((e) => e.selectWidget), { loading: ye, error: z, fetchDashboard: B, updateDashboard: V } = i(), { createWidget: H, deleteWidget: U, duplicateWidget: W, batchUpdatePositions: G, refetch: K } = r(x || void 0, s), { createPage: q, updatePage: J, deletePage: Y, reorderPages: X } = te();
-	l(() => {
-		if (!s) {
+var v = c(function() {
+	let { dashboardId: c } = se(), v = r(), { t: y } = f(), { hasPermission: b, isLoading: de } = le(), fe = b(o.DASHBOARD_READ), pe = b(o.DASHBOARD_UPDATE), me = b(o.DASHBOARD_EXPORT), he = b(o.DASHBOARD_PUBLISH), [x, S] = d(null), [ge, C] = d(!1), [_e, w] = d(!1), [ve, T] = d(!1), [E, ye] = d(!1), { isInDrilldown: D, getContextFromUrl: O, getDrilldownMetadata: k } = ee(), A = t((e) => e.currentDashboard), j = t((e) => e.setCurrentDashboard), M = t((e) => e.setGlobalFilterValue), N = t((e) => e.clearAllGlobalFilters), P = e((e) => e.widgets), F = e((e) => e.clipboardWidgetId), I = e((e) => e.clipboardAction), L = e((e) => e.clearClipboard), R = e((e) => e.selectWidget), { loading: be, error: z, fetchDashboard: B, updateDashboard: V } = a(), { createWidget: H, deleteWidget: U, duplicateWidget: W, batchUpdatePositions: G, refetch: K } = i(x || void 0, c), { createPage: q, updatePage: J, deletePage: Y, reorderPages: X } = te();
+	u(() => {
+		if (!c) {
 			v("/dashboards");
 			return;
 		}
-		return N(), w(!1), B(s).then((e) => {
+		return N(), w(!1), B(c).then((e) => {
 			e ? e.pages && e.pages.length > 0 && S(e.pages[0].id) : w(!0);
 		}), () => {
 			j(null), N(), w(!1);
 		};
 	}, [
-		s,
+		c,
 		v,
 		B,
 		j,
 		N
-	]), l(() => {
+	]), u(() => {
 		if (!D) return;
 		let e = O(), t = k();
 		Object.entries(e).forEach(([e, t]) => {
@@ -58,10 +60,10 @@ var v = s(function() {
 		M
 	]);
 	let Z = oe(K);
-	Z.current = K, l(() => {
-		if (!E || !s) return;
+	Z.current = K, u(() => {
+		if (!E || !c) return;
 		let e = () => {
-			typeof document < "u" && document.visibilityState !== "visible" || t.getState().viewMode !== "edit" && (B(s, { silent: !0 }), Z.current());
+			typeof document < "u" && document.visibilityState !== "visible" || t.getState().viewMode !== "edit" && (B(c, { silent: !0 }), Z.current());
 		};
 		e();
 		let n = window.setInterval(e, 3500), r = () => {
@@ -72,11 +74,11 @@ var v = s(function() {
 		};
 	}, [
 		E,
-		s,
+		c,
 		B
 	]);
-	let be = c(async () => {
-		if (s) {
+	let xe = l(async () => {
+		if (c) {
 			C(!0);
 			try {
 				let e = Array.from(P.values());
@@ -84,7 +86,7 @@ var v = s(function() {
 					id: e.id,
 					position: e.position
 				}))), A && await V({
-					id: s,
+					id: c,
 					name: A.name,
 					description: A.description
 				});
@@ -93,18 +95,18 @@ var v = s(function() {
 			}
 		}
 	}, [
-		s,
+		c,
 		P,
 		A,
 		G,
 		V
-	]), xe = c(() => {
+	]), Se = l(() => {
 		v("/dashboards");
-	}, [v]), Se = c((e) => {
+	}, [v]), Ce = l((e) => {
 		S(e);
-	}, []), Ce = c(async () => {
+	}, []), we = l(async () => {
 		let e = x || A?.pages?.[0]?.id;
-		if (!F || !s || !e) return;
+		if (!F || !c || !e) return;
 		let t = P.get(F);
 		if (!t) {
 			L();
@@ -124,7 +126,7 @@ var v = s(function() {
 		} catch {}
 		i ||= await H({
 			pageId: e,
-			dashboardId: s,
+			dashboardId: c,
 			type: t.type,
 			title: r,
 			description: t.description,
@@ -140,7 +142,7 @@ var v = s(function() {
 	}, [
 		F,
 		I,
-		s,
+		c,
 		x,
 		A,
 		P,
@@ -150,18 +152,18 @@ var v = s(function() {
 		R,
 		L,
 		y
-	]), we = c(() => {
+	]), Te = l(() => {
 		T(!0);
-	}, []), [Te, Q] = u(!1), Ee = c(() => {
+	}, []), [Ee, Q] = d(!1), De = l(() => {
 		Q(!0);
-	}, []), $ = c(() => {
+	}, []), $ = l(() => {
 		Q(!1);
-	}, []), De = c(() => {
+	}, []), Oe = l(() => {
 		T(!1);
-	}, []), Oe = c(async () => {
-		if (!A || !s) return;
+	}, []), ke = l(async () => {
+		if (!A || !c) return;
 		let e = await q({
-			dashboardId: s,
+			dashboardId: c,
 			name: y("bigconsole.dashboards.view.pageName", "Page {{count}}", { count: (A.pages?.length || 0) + 1 })
 		});
 		e && (j({
@@ -170,11 +172,11 @@ var v = s(function() {
 		}), S(e.id));
 	}, [
 		A,
-		s,
+		c,
 		j,
 		q,
 		y
-	]), ke = c(async (e, t) => {
+	]), Ae = l(async (e, t) => {
 		A && await J({
 			id: e,
 			name: t
@@ -189,12 +191,12 @@ var v = s(function() {
 		A,
 		j,
 		J
-	]), Ae = c(async (e) => {
-		if (!A || !s) return;
+	]), je = l(async (e) => {
+		if (!A || !c) return;
 		let t = A.pages?.find((t) => t.id === e);
 		if (!t) return;
 		let n = await q({
-			dashboardId: s,
+			dashboardId: c,
 			name: y("bigconsole.dashboards.view.pageCopyName", "{{name}} (Copy)", { name: t.name ?? "" })
 		});
 		n && (j({
@@ -203,11 +205,11 @@ var v = s(function() {
 		}), S(n.id));
 	}, [
 		A,
-		s,
+		c,
 		j,
 		q,
 		y
-	]), je = c(async (e) => {
+	]), Me = l(async (e) => {
 		if (!(!A || (A.pages?.length || 0) <= 1) && await Y(e)) {
 			let t = A.pages?.filter((t) => t.id !== e).map((e, t) => ({
 				...e,
@@ -223,72 +225,66 @@ var v = s(function() {
 		j,
 		x,
 		Y
-	]), Me = c(async (e) => {
-		!A || !s || (j({
+	]), Ne = l(async (e) => {
+		!A || !c || (j({
 			...A,
 			pages: e.map((e, t) => ({
 				...e,
 				order: t
 			}))
-		}), await X(s, e.map((e) => e.id)));
+		}), await X(c, e.map((e) => e.id)));
 	}, [
 		A,
-		s,
+		c,
 		j,
 		X
 	]);
-	return ue ? /* @__PURE__ */ g("div", {
+	return de ? /* @__PURE__ */ g("div", {
 		className: "flex items-center justify-center h-full",
 		children: /* @__PURE__ */ g("div", { className: "animate-spin w-8 h-8 border-4 border-action-primary-bg border-t-transparent rounded-full" })
-	}) : de ? z ? /* @__PURE__ */ g("div", {
-		className: "flex flex-col items-center justify-center h-full",
+	}) : fe ? z ? /* @__PURE__ */ g("div", {
+		className: "flex h-full flex-col items-center justify-center",
 		style: { padding: "var(--space-pagePadding)" },
-		children: /* @__PURE__ */ _("div", {
-			className: "bg-status-error-bg border border-status-error-border rounded-lg p-6 w-full max-w-md",
-			children: [
-				/* @__PURE__ */ g("h3", {
-					className: "text-lg font-medium text-status-error-text mb-2",
-					children: y("bigconsole.dashboards.view.errorTitle", "Error loading dashboard")
-				}),
-				/* @__PURE__ */ g("p", {
-					className: "text-sm text-text-secondary mb-4 break-words",
-					children: z.message
-				}),
-				/* @__PURE__ */ _("div", {
-					className: "flex flex-wrap gap-3",
-					children: [/* @__PURE__ */ g("button", {
-						type: "button",
-						onClick: () => B(s),
-						className: "px-4 py-2 text-sm font-medium text-action-primary-fg bg-action-primary-bg hover:bg-action-primary-bgHover rounded-md",
-						children: y("bigconsole.dashboards.view.retry", "Retry")
-					}), /* @__PURE__ */ g("button", {
-						type: "button",
-						onClick: () => v("/dashboards"),
-						className: "px-4 py-2 text-sm font-medium text-text-secondary bg-bg-sunken hover:bg-bg-sunken/80 rounded-md",
-						children: y("bigconsole.dashboards.view.backToDashboards", "Back to Dashboards")
-					})]
-				})
-			]
+		children: /* @__PURE__ */ g(n, {
+			headingLevel: 2,
+			tone: "danger",
+			title: y("bigconsole.dashboards.view.errorTitle", "Error loading dashboard"),
+			description: /* @__PURE__ */ g("span", {
+				className: "break-words",
+				children: z.message
+			}),
+			className: "w-full max-w-md",
+			"data-testid": "dashboard-view-error",
+			actions: /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(p, {
+				size: "sm",
+				onClick: () => B(c),
+				children: y("bigconsole.dashboards.view.retry", "Retry")
+			}), /* @__PURE__ */ g(p, {
+				size: "sm",
+				variant: "outline",
+				onClick: () => v("/dashboards"),
+				children: y("bigconsole.dashboards.view.backToDashboards", "Back to Dashboards")
+			})] })
 		})
-	}) : ge ? /* @__PURE__ */ g("div", {
+	}) : _e ? /* @__PURE__ */ g("div", {
 		className: "flex flex-col items-center justify-center h-full",
 		style: { padding: "var(--space-pagePadding)" },
 		children: /* @__PURE__ */ g(m, {
 			illustration: "empty-data",
 			title: y("bigconsole.dashboards.view.notFoundTitle", "Dashboard not found"),
 			description: /* @__PURE__ */ _(h, { children: [y("bigconsole.dashboards.view.notFoundDescription", "The dashboard you're looking for doesn't exist or has been deleted."), /* @__PURE__ */ g("span", {
-				className: "mt-2 block font-mono text-xs text-text-tertiary break-all",
-				children: y("bigconsole.dashboards.view.idLabel", "ID: {{id}}", { id: s ?? "" })
+				className: "mt-2 block font-mono text-xs text-text-muted break-all",
+				children: y("bigconsole.dashboards.view.idLabel", "ID: {{id}}", { id: c ?? "" })
 			})] }),
-			action: /* @__PURE__ */ g("button", {
-				type: "button",
+			action: /* @__PURE__ */ g(p, {
 				onClick: () => v("/dashboards"),
-				className: "px-4 py-2 text-sm font-medium text-action-primary-fg bg-action-primary-bg hover:bg-action-primary-bgHover rounded-md",
 				children: y("bigconsole.dashboards.view.backToDashboards", "Back to Dashboards")
 			})
 		})
-	}) : ye || !A ? /* @__PURE__ */ g("div", {
+	}) : be || !A ? /* @__PURE__ */ g("div", {
 		className: "flex items-center justify-center h-full",
+		role: "status",
+		"aria-live": "polite",
 		children: /* @__PURE__ */ _("div", {
 			className: "flex flex-col items-center gap-4",
 			children: [/* @__PURE__ */ g("div", { className: "animate-spin w-8 h-8 border-4 border-action-primary-bg border-t-transparent rounded-full" }), /* @__PURE__ */ g("p", {
@@ -299,29 +295,39 @@ var v = s(function() {
 	}) : /* @__PURE__ */ _("div", {
 		className: "h-full flex flex-col overflow-hidden",
 		children: [
-			/* @__PURE__ */ _("div", {
-				className: "flex items-center gap-3 px-3 py-2 border-b border-border-default bg-bg-surface flex-shrink-0",
-				children: [
-					/* @__PURE__ */ _(p, {
-						onClick: xe,
-						variant: "ghost",
-						size: "sm",
-						title: y("bigconsole.dashboards.view.backToDashboards", "Back to Dashboards"),
-						"aria-label": y("bigconsole.dashboards.view.backToDashboards", "Back to Dashboards"),
-						children: [/* @__PURE__ */ g(d, { className: "w-4 h-4 mr-2" }), y("bigconsole.dashboards.view.back", "Back")]
-					}),
-					/* @__PURE__ */ g("h2", {
-						className: "text-sm font-semibold text-text-primary truncate",
-						children: A.name
-					}),
-					/* @__PURE__ */ g("div", {
-						className: "ml-auto flex-shrink-0",
-						children: /* @__PURE__ */ g(re, {
-							isLive: E,
-							onToggle: () => ve((e) => !e)
+			/* @__PURE__ */ g(n, {
+				emphasis: "bare",
+				padding: "none",
+				"data-testid": "dashboard-route-header",
+				"aria-label": "Dashboard",
+				className: "flex-shrink-0 border-b border-[var(--color-border-subtle)] bg-bg-surface px-3 py-2",
+				headerClassName: "",
+				header: /* @__PURE__ */ _("div", {
+					className: "flex flex-wrap items-center gap-control-gap",
+					children: [
+						/* @__PURE__ */ _(p, {
+							onClick: Se,
+							variant: "ghost",
+							size: "sm",
+							title: y("bigconsole.dashboards.view.backToDashboards", "Back to Dashboards"),
+							"aria-label": y("bigconsole.dashboards.view.backToDashboards", "Back to Dashboards"),
+							className: "flex-shrink-0",
+							children: [/* @__PURE__ */ g(ue, { className: "w-4 h-4 mr-2" }), y("bigconsole.dashboards.view.back", "Back")]
+						}),
+						/* @__PURE__ */ g("h1", {
+							className: "min-w-0 flex-1 truncate text-sm font-semibold text-text-primary",
+							title: A.name,
+							children: A.name
+						}),
+						/* @__PURE__ */ g("div", {
+							className: "flex-shrink-0",
+							children: /* @__PURE__ */ g(s, {
+								isLive: E,
+								onToggle: () => ye((e) => !e)
+							})
 						})
-					})
-				]
+					]
+				})
 			}),
 			D && /* @__PURE__ */ g(ie, {
 				currentDashboardId: A.id,
@@ -334,34 +340,34 @@ var v = s(function() {
 					dashboardId: A.id,
 					pageId: x || A.pages?.[0]?.id,
 					title: A.name,
-					onPaste: Ce,
-					onSave: fe ? be : void 0,
-					isSaving: he,
-					onExport: pe ? we : void 0,
-					onPublishTemplate: me ? Ee : void 0,
+					onPaste: we,
+					onSave: pe ? xe : void 0,
+					isSaving: ge,
+					onExport: me ? Te : void 0,
+					onPublishTemplate: he ? De : void 0,
 					pages: (A.pages || []).map((e, t) => ({
 						id: e.id,
 						name: e.name || y("bigconsole.dashboards.view.pageName", "Page {{count}}", { count: t + 1 }),
 						order: e.order ?? 0
 					})),
 					activePageId: x || A.pages?.[0]?.id,
-					onPageChange: Se,
-					onPageAdd: Oe,
-					onPageRename: ke,
-					onPageDuplicate: Ae,
-					onPageDelete: je,
-					onPagesReorder: Me,
+					onPageChange: Ce,
+					onPageAdd: ke,
+					onPageRename: Ae,
+					onPageDuplicate: je,
+					onPageDelete: Me,
+					onPagesReorder: Ne,
 					showPageTabs: !0
 				})
 			}),
-			/* @__PURE__ */ g(o, {
-				isOpen: _e,
+			/* @__PURE__ */ g(re, {
+				isOpen: ve,
 				dashboardId: A.id,
 				dashboardName: A.name,
-				onClose: De
+				onClose: Oe
 			}),
 			/* @__PURE__ */ g(ae, {
-				isOpen: Te,
+				isOpen: Ee,
 				dashboardId: A.id,
 				dashboardName: A.name,
 				dashboardDescription: A.description,