@burdenoff/microfe-bigconsole 2026.622.1 → 2026.624.2

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardViewPage.js","names":[],"sources":["../../../src/bigconsole/pages/DashboardViewPage.tsx"],"sourcesContent":["/**\n * DashboardViewPage\n *\n * View/edit a single dashboard - fetches data from real backend.\n * Supports drilldown context propagation via URL parameters.\n */\n\nimport { type FC, memo, useEffect, useCallback, useState } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { ArrowLeft } from 'lucide-react';\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { useBigConsoleNavigate } from '../context';\nimport { DashboardCanvas, ExportDashboardDialog, DrilldownBreadcrumb } from '../components/dashboard';\nimport { useDashboardStore, useWidgetStore } from '../store';\nimport { useDashboardOperations, useWidgetOperations, usePageOperations } from '../hooks';\nimport { useFilterUrlSync } from '../hooks/useFilterUrlSync';\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DashboardViewPage: FC = memo(function DashboardViewPage() {\n  const { dashboardId } = useParams<{ dashboardId: string }>();\n  const navigate = useBigConsoleNavigate();\n  const [currentPageId, setCurrentPageId] = useState<string | null>(null);\n  const [isSaving, setIsSaving] = useState(false);\n  const [notFound, setNotFound] = useState(false);\n  const [isExportDialogOpen, setIsExportDialogOpen] = useState(false);\n\n  // Drilldown context from URL\n  const { isInDrilldown, getContextFromUrl, getDrilldownMetadata } = useFilterUrlSync();\n\n  // Store actions\n  const currentDashboard = useDashboardStore((state) => state.currentDashboard);\n  const setCurrentDashboard = useDashboardStore((state) => state.setCurrentDashboard);\n  const setGlobalFilterValue = useDashboardStore((state) => state.setGlobalFilterValue);\n  const clearAllGlobalFilters = useDashboardStore((state) => state.clearAllGlobalFilters);\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  const selectWidget = useWidgetStore((state) => state.selectWidget);\n\n  // Dashboard operations hook\n  const { loading, error, fetchDashboard, updateDashboard } = useDashboardOperations();\n\n  // Widget operations hook\n  const {\n    createWidget: createWidgetMutation,\n    deleteWidget: deleteWidgetMutation,\n    duplicateWidget: duplicateWidgetMutation,\n    batchUpdatePositions,\n  } = useWidgetOperations(currentPageId || undefined, dashboardId);\n\n  // Page operations hook\n  const {\n    createPage: createPageMutation,\n    updatePage: updatePageMutation,\n    deletePage: deletePageMutation,\n    reorderPages: reorderPagesMutation,\n  } = usePageOperations();\n\n  // Load dashboard data\n  useEffect(() => {\n    if (!dashboardId) {\n      navigate('/dashboards');\n      return;\n    }\n\n    // Clear stale global filters from previous dashboard before loading new one.\n    // This prevents drilldown context filters (ctx_*) from the source dashboard\n    // from persisting and incorrectly filtering data on the target dashboard.\n    clearAllGlobalFilters();\n\n    setNotFound(false);\n\n    // Fetch dashboard from backend\n    fetchDashboard(dashboardId).then((dashboard) => {\n      if (dashboard) {\n        // Set the first page as current page\n        if (dashboard.pages && dashboard.pages.length > 0) {\n          setCurrentPageId(dashboard.pages[0].id);\n        }\n      } else {\n        // Dashboard not found\n        setNotFound(true);\n      }\n    });\n\n    // Cleanup\n    return () => {\n      setCurrentDashboard(null);\n      clearAllGlobalFilters();\n      setNotFound(false);\n    };\n  }, [dashboardId, navigate, fetchDashboard, setCurrentDashboard, clearAllGlobalFilters]);\n\n  // Load drilldown context from URL and apply to global filters\n  useEffect(() => {\n    if (!isInDrilldown) return;\n\n    // Get context params from URL (ctx_* params)\n    const contextParams = getContextFromUrl();\n    const drilldownMeta = getDrilldownMetadata();\n\n    // Apply context to dashboard state (available for widgets to use)\n    // Store as special filter values that widgets can reference\n    Object.entries(contextParams).forEach(([key, value]) => {\n      // Store context params as global filter values with ctx_ prefix for clarity\n      setGlobalFilterValue(`ctx_${key}`, value);\n    });\n\n    // Store drilldown metadata as special values\n    if (drilldownMeta.depth > 0) {\n      setGlobalFilterValue('__drilldown_depth', drilldownMeta.depth);\n      setGlobalFilterValue('__drilldown_parent', drilldownMeta.parent);\n      setGlobalFilterValue('__drilldown_path', drilldownMeta.path);\n    }\n\n    // Log for debugging\n    if (Object.keys(contextParams).length > 0) {\n      console.debug('[DashboardViewPage] Loaded drilldown context:', {\n        context: contextParams,\n        metadata: drilldownMeta,\n      });\n    }\n  }, [isInDrilldown, getContextFromUrl, getDrilldownMetadata, setGlobalFilterValue]);\n\n  // Handle save - batch update widget positions and dashboard metadata\n  const handleSave = useCallback(async () => {\n    if (!dashboardId) return;\n\n    setIsSaving(true);\n    try {\n      // Get all widgets and their positions\n      const widgetList = Array.from(widgets.values());\n      if (widgetList.length > 0) {\n        const positionUpdates = widgetList.map((widget) => ({\n          id: widget.id,\n          position: widget.position,\n        }));\n\n        await batchUpdatePositions(positionUpdates);\n      }\n\n      // Update dashboard metadata if needed\n      if (currentDashboard) {\n        await updateDashboard({\n          id: dashboardId,\n          name: currentDashboard.name,\n          description: currentDashboard.description,\n        });\n      }\n    } catch (error) {\n    } finally {\n      setIsSaving(false);\n    }\n  }, [dashboardId, widgets, currentDashboard, batchUpdatePositions, updateDashboard]);\n\n  // Navigate back to the dashboards list\n  const handleBack = useCallback(() => {\n    navigate('/dashboards');\n  }, [navigate]);\n\n  // Handle page change\n  const handlePageChange = useCallback((pageId: string) => {\n    setCurrentPageId(pageId);\n  }, []);\n\n  // Handle paste widget from clipboard\n  const handlePaste = useCallback(async () => {\n    const pageId = currentPageId || 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    // Calculate new position (place at bottom of existing widgets)\n    const widgetsArray = Array.from(widgets.values());\n    const maxY = widgetsArray.reduce((max, w) => {\n      const widgetBottom = (w.positionY ?? 0) + (w.positionHeight ?? 4);\n      return Math.max(max, widgetBottom);\n    }, 0);\n\n    const newPosition = {\n      x: 0,\n      y: maxY,\n      width: sourceWidget.positionWidth ?? 4,\n      height: sourceWidget.positionHeight ?? 4,\n    };\n\n    const newTitle = clipboardAction === 'copy' ? `${sourceWidget.title} (Copy)` : sourceWidget.title;\n\n    let newWidget = null;\n\n    // Try duplicateWidget API first\n    try {\n      newWidget = await duplicateWidgetMutation(clipboardWidgetId, newPosition, newTitle);\n    } catch (err) {}\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: Data source fields (DataSink → Parser → Widget)\n        dataSinkId: (sourceWidget as unknown as Record<string, string | undefined>).dataSinkId,\n        datasetId: (sourceWidget as unknown as Record<string, string | undefined>).datasetId,\n        parserId: (sourceWidget as unknown as Record<string, string | undefined>).parserId,\n        parserRules: (sourceWidget as unknown as Record<string, string | undefined>).parserRules,\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    currentPageId,\n    currentDashboard,\n    widgets,\n    duplicateWidgetMutation,\n    createWidgetMutation,\n    deleteWidgetMutation,\n    selectWidget,\n    clearClipboard,\n  ]);\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 adding a new page\n  const handlePageAdd = useCallback(async () => {\n    if (!currentDashboard || !dashboardId) return;\n\n    const newPageCount = (currentDashboard.pages?.length || 0) + 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: [...(currentDashboard.pages || []), newPage],\n      });\n\n      // Switch to the new page\n      setCurrentPageId(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, name: 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      const newPage = await createPageMutation({\n        dashboardId,\n        name: `${sourcePage.name} (Copy)`,\n      });\n\n      if (newPage) {\n        setCurrentDashboard({\n          ...currentDashboard,\n          pages: [...(currentDashboard.pages || []), newPage],\n        });\n\n        setCurrentPageId(newPage.id);\n      }\n      // Note: Widget duplication would require additional backend support\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 || 0) <= 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\n          ?.filter((p) => p.id !== pageId)\n          .map((p, index) => ({ ...p, order: index }));\n\n        setCurrentDashboard({\n          ...currentDashboard,\n          pages: updatedPages,\n        });\n\n        // Switch to first page if current page was deleted\n        if (currentPageId === pageId) {\n          setCurrentPageId(updatedPages?.[0]?.id || null);\n        }\n      }\n    },\n    [currentDashboard, setCurrentDashboard, currentPageId, deletePageMutation]\n  );\n\n  // Handle reordering pages\n  const handlePagesReorder = useCallback(\n    async (reorderedPages: Array<{ id: string; name?: string; order?: number }>) => {\n      if (!currentDashboard || !dashboardId) return;\n\n      // Update local state optimistically\n      setCurrentDashboard({\n        ...currentDashboard,\n        pages: reorderedPages.map((page, index) => ({\n          ...page,\n          order: 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  // Error state\n  if (error) {\n    return (\n      <div className=\"flex flex-col items-center justify-center h-full\" style={{ padding: 'var(--space-pagePadding)' }}>\n        <div className=\"bg-status-error-bg border border-status-error-border rounded-lg p-6 w-full max-w-md\">\n          <h3 className=\"text-lg font-medium text-status-error-text mb-2\">Error loading dashboard</h3>\n          <p className=\"text-sm text-text-secondary mb-4 break-words\">{error.message}</p>\n          <div className=\"flex flex-wrap gap-3\">\n            <button\n              type=\"button\"\n              onClick={() => fetchDashboard(dashboardId!)}\n              className=\"px-4 py-2 text-sm font-medium text-action-primary-fg bg-action-primary-bg hover:bg-action-primary-bgHover rounded-md\"\n            >\n              Retry\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => navigate('/dashboards')}\n              className=\"px-4 py-2 text-sm font-medium text-text-secondary bg-bg-muted hover:bg-bg-muted/80 rounded-md\"\n            >\n              Back to Dashboards\n            </button>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  // Not found state\n  if (notFound) {\n    return (\n      <div className=\"flex flex-col items-center justify-center h-full\" style={{ padding: 'var(--space-pagePadding)' }}>\n        <div className=\"bg-bg-surface border border-border-default rounded-lg p-6 w-full max-w-md text-center\">\n          <svg\n            className=\"w-16 h-16 mx-auto mb-4 text-text-tertiary\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={1.5}\n              d=\"M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n            />\n          </svg>\n          <h3 className=\"text-lg font-medium text-text-primary mb-2\">Dashboard not found</h3>\n          <p className=\"text-sm text-text-secondary mb-4\">\n            The dashboard you&apos;re looking for doesn&apos;t exist or has been deleted.\n          </p>\n          <p className=\"text-xs text-text-tertiary mb-4 font-mono break-all\">ID: {dashboardId}</p>\n          <button\n            type=\"button\"\n            onClick={() => navigate('/dashboards')}\n            className=\"px-4 py-2 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  // Loading state\n  if (loading || !currentDashboard) {\n    return (\n      <div className=\"flex items-center justify-center h-full\">\n        <div className=\"flex flex-col items-center gap-4\">\n          <div className=\"animate-spin w-8 h-8 border-4 border-action-primary-bg border-t-transparent rounded-full\" />\n          <p className=\"text-sm text-text-secondary\">Loading dashboard...</p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"h-full flex flex-col overflow-hidden\">\n      {/* Page header with back navigation - visible in both view and edit modes */}\n      <div className=\"flex items-center gap-3 px-3 py-2 border-b border-border-default bg-bg-surface flex-shrink-0\">\n        <Button\n          onClick={handleBack}\n          variant=\"ghost\"\n          size=\"sm\"\n          title=\"Back to Dashboards\"\n          aria-label=\"Back to Dashboards\"\n        >\n          <ArrowLeft className=\"w-4 h-4 mr-2\" />\n          Back\n        </Button>\n        <h2 className=\"text-sm font-semibold text-text-primary truncate\">{currentDashboard.name}</h2>\n      </div>\n\n      {/* Drilldown Breadcrumb - shown when navigating via drilldown */}\n      {isInDrilldown && (\n        <DrilldownBreadcrumb\n          currentDashboardId={currentDashboard.id}\n          currentDashboardName={currentDashboard.name}\n          basePath=\"/bigconsole/dashboards\"\n        />\n      )}\n\n      {/* Dashboard Canvas with Page Tabs */}\n      <div className=\"flex-1 min-w-0 overflow-hidden\">\n        <DashboardCanvas\n          dashboardId={currentDashboard.id}\n          pageId={currentPageId || currentDashboard.pages?.[0]?.id}\n          title={currentDashboard.name}\n          onPaste={handlePaste}\n          onSave={handleSave}\n          isSaving={isSaving}\n          onExport={handleExport}\n          // Page tabs props\n          pages={(currentDashboard.pages || []).map((page, index) => ({\n            id: page.id,\n            name: page.name || `Page ${index + 1}`,\n            order: page.order ?? 0,\n          }))}\n          activePageId={currentPageId || 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      </div>\n\n      {/* Export Dashboard Dialog */}\n      <ExportDashboardDialog\n        isOpen={isExportDialogOpen}\n        dashboardId={currentDashboard.id}\n        dashboardName={currentDashboard.name}\n        onClose={handleExportClose}\n      />\n    </div>\n  );\n});\n\nexport default DashboardViewPage;\n"],"mappings":"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"}
+{"version":3,"file":"DashboardViewPage.js","names":[],"sources":["../../../src/bigconsole/pages/DashboardViewPage.tsx"],"sourcesContent":["/**\n * DashboardViewPage\n *\n * View/edit a single dashboard - fetches data from real backend.\n * Supports drilldown context propagation via URL parameters.\n */\n\nimport { type FC, memo, useEffect, useCallback, useState } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { ArrowLeft } from 'lucide-react';\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { useBigConsoleNavigate } from '../context';\nimport { DashboardCanvas, ExportDashboardDialog, DrilldownBreadcrumb } from '../components/dashboard';\nimport { useDashboardStore, useWidgetStore } from '../store';\nimport { useDashboardOperations, useWidgetOperations, usePageOperations } from '../hooks';\nimport { useFilterUrlSync } from '../hooks/useFilterUrlSync';\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DashboardViewPage: FC = memo(function DashboardViewPage() {\n  const { dashboardId } = useParams<{ dashboardId: string }>();\n  const navigate = useBigConsoleNavigate();\n  const [currentPageId, setCurrentPageId] = useState<string | null>(null);\n  const [isSaving, setIsSaving] = useState(false);\n  const [notFound, setNotFound] = useState(false);\n  const [isExportDialogOpen, setIsExportDialogOpen] = useState(false);\n\n  // Drilldown context from URL\n  const { isInDrilldown, getContextFromUrl, getDrilldownMetadata } = useFilterUrlSync();\n\n  // Store actions\n  const currentDashboard = useDashboardStore((state) => state.currentDashboard);\n  const setCurrentDashboard = useDashboardStore((state) => state.setCurrentDashboard);\n  const setGlobalFilterValue = useDashboardStore((state) => state.setGlobalFilterValue);\n  const clearAllGlobalFilters = useDashboardStore((state) => state.clearAllGlobalFilters);\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  const selectWidget = useWidgetStore((state) => state.selectWidget);\n\n  // Dashboard operations hook\n  const { loading, error, fetchDashboard, updateDashboard } = useDashboardOperations();\n\n  // Widget operations hook\n  const {\n    createWidget: createWidgetMutation,\n    deleteWidget: deleteWidgetMutation,\n    duplicateWidget: duplicateWidgetMutation,\n    batchUpdatePositions,\n  } = useWidgetOperations(currentPageId || undefined, dashboardId);\n\n  // Page operations hook\n  const {\n    createPage: createPageMutation,\n    updatePage: updatePageMutation,\n    deletePage: deletePageMutation,\n    reorderPages: reorderPagesMutation,\n  } = usePageOperations();\n\n  // Load dashboard data\n  useEffect(() => {\n    if (!dashboardId) {\n      navigate('/dashboards');\n      return;\n    }\n\n    // Clear stale global filters from previous dashboard before loading new one.\n    // This prevents drilldown context filters (ctx_*) from the source dashboard\n    // from persisting and incorrectly filtering data on the target dashboard.\n    clearAllGlobalFilters();\n\n    setNotFound(false);\n\n    // Fetch dashboard from backend\n    fetchDashboard(dashboardId).then((dashboard) => {\n      if (dashboard) {\n        // Set the first page as current page\n        if (dashboard.pages && dashboard.pages.length > 0) {\n          setCurrentPageId(dashboard.pages[0].id);\n        }\n      } else {\n        // Dashboard not found\n        setNotFound(true);\n      }\n    });\n\n    // Cleanup\n    return () => {\n      setCurrentDashboard(null);\n      clearAllGlobalFilters();\n      setNotFound(false);\n    };\n  }, [dashboardId, navigate, fetchDashboard, setCurrentDashboard, clearAllGlobalFilters]);\n\n  // Load drilldown context from URL and apply to global filters\n  useEffect(() => {\n    if (!isInDrilldown) return;\n\n    // Get context params from URL (ctx_* params)\n    const contextParams = getContextFromUrl();\n    const drilldownMeta = getDrilldownMetadata();\n\n    // Apply context to dashboard state (available for widgets to use)\n    // Store as special filter values that widgets can reference\n    Object.entries(contextParams).forEach(([key, value]) => {\n      // Store context params as global filter values with ctx_ prefix for clarity\n      setGlobalFilterValue(`ctx_${key}`, value);\n    });\n\n    // Store drilldown metadata as special values\n    if (drilldownMeta.depth > 0) {\n      setGlobalFilterValue('__drilldown_depth', drilldownMeta.depth);\n      setGlobalFilterValue('__drilldown_parent', drilldownMeta.parent);\n      setGlobalFilterValue('__drilldown_path', drilldownMeta.path);\n    }\n\n    // Log for debugging\n    if (Object.keys(contextParams).length > 0) {\n      console.debug('[DashboardViewPage] Loaded drilldown context:', {\n        context: contextParams,\n        metadata: drilldownMeta,\n      });\n    }\n  }, [isInDrilldown, getContextFromUrl, getDrilldownMetadata, setGlobalFilterValue]);\n\n  // Handle save - batch update widget positions and dashboard metadata\n  const handleSave = useCallback(async () => {\n    if (!dashboardId) return;\n\n    setIsSaving(true);\n    try {\n      // Get all widgets and their positions\n      const widgetList = Array.from(widgets.values());\n      if (widgetList.length > 0) {\n        const positionUpdates = widgetList.map((widget) => ({\n          id: widget.id,\n          position: widget.position,\n        }));\n\n        await batchUpdatePositions(positionUpdates);\n      }\n\n      // Update dashboard metadata if needed\n      if (currentDashboard) {\n        await updateDashboard({\n          id: dashboardId,\n          name: currentDashboard.name,\n          description: currentDashboard.description,\n        });\n      }\n    } catch (error) {\n    } finally {\n      setIsSaving(false);\n    }\n  }, [dashboardId, widgets, currentDashboard, batchUpdatePositions, updateDashboard]);\n\n  // Navigate back to the dashboards list\n  const handleBack = useCallback(() => {\n    navigate('/dashboards');\n  }, [navigate]);\n\n  // Handle page change\n  const handlePageChange = useCallback((pageId: string) => {\n    setCurrentPageId(pageId);\n  }, []);\n\n  // Handle paste widget from clipboard\n  const handlePaste = useCallback(async () => {\n    const pageId = currentPageId || 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    // Calculate new position (place at bottom of existing widgets)\n    const widgetsArray = Array.from(widgets.values());\n    const maxY = widgetsArray.reduce((max, w) => {\n      const widgetBottom = (w.positionY ?? 0) + (w.positionHeight ?? 4);\n      return Math.max(max, widgetBottom);\n    }, 0);\n\n    const newPosition = {\n      x: 0,\n      y: maxY,\n      width: sourceWidget.positionWidth ?? 4,\n      height: sourceWidget.positionHeight ?? 4,\n    };\n\n    const newTitle = clipboardAction === 'copy' ? `${sourceWidget.title} (Copy)` : sourceWidget.title;\n\n    let newWidget = null;\n\n    // Try duplicateWidget API first\n    try {\n      newWidget = await duplicateWidgetMutation(clipboardWidgetId, newPosition, newTitle);\n    } catch (err) {}\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: Data source fields (DataSink → Parser → Widget)\n        dataSinkId: (sourceWidget as unknown as Record<string, string | undefined>).dataSinkId,\n        datasetId: (sourceWidget as unknown as Record<string, string | undefined>).datasetId,\n        parserId: (sourceWidget as unknown as Record<string, string | undefined>).parserId,\n        parserRules: (sourceWidget as unknown as Record<string, string | undefined>).parserRules,\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    currentPageId,\n    currentDashboard,\n    widgets,\n    duplicateWidgetMutation,\n    createWidgetMutation,\n    deleteWidgetMutation,\n    selectWidget,\n    clearClipboard,\n  ]);\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 adding a new page\n  const handlePageAdd = useCallback(async () => {\n    if (!currentDashboard || !dashboardId) return;\n\n    const newPageCount = (currentDashboard.pages?.length || 0) + 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: [...(currentDashboard.pages || []), newPage],\n      });\n\n      // Switch to the new page\n      setCurrentPageId(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, name: 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      const newPage = await createPageMutation({\n        dashboardId,\n        name: `${sourcePage.name} (Copy)`,\n      });\n\n      if (newPage) {\n        setCurrentDashboard({\n          ...currentDashboard,\n          pages: [...(currentDashboard.pages || []), newPage],\n        });\n\n        setCurrentPageId(newPage.id);\n      }\n      // Note: Widget duplication would require additional backend support\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 || 0) <= 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\n          ?.filter((p) => p.id !== pageId)\n          .map((p, index) => ({ ...p, order: index }));\n\n        setCurrentDashboard({\n          ...currentDashboard,\n          pages: updatedPages,\n        });\n\n        // Switch to first page if current page was deleted\n        if (currentPageId === pageId) {\n          setCurrentPageId(updatedPages?.[0]?.id || null);\n        }\n      }\n    },\n    [currentDashboard, setCurrentDashboard, currentPageId, deletePageMutation]\n  );\n\n  // Handle reordering pages\n  const handlePagesReorder = useCallback(\n    async (reorderedPages: Array<{ id: string; name?: string; order?: number }>) => {\n      if (!currentDashboard || !dashboardId) return;\n\n      // Update local state optimistically\n      setCurrentDashboard({\n        ...currentDashboard,\n        pages: reorderedPages.map((page, index) => ({\n          ...page,\n          order: 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  // Error state\n  if (error) {\n    return (\n      <div className=\"flex flex-col items-center justify-center h-full\" style={{ padding: 'var(--space-pagePadding)' }}>\n        <div className=\"bg-status-error-bg border border-status-error-border rounded-lg p-6 w-full max-w-md\">\n          <h3 className=\"text-lg font-medium text-status-error-text mb-2\">Error loading dashboard</h3>\n          <p className=\"text-sm text-text-secondary mb-4 break-words\">{error.message}</p>\n          <div className=\"flex flex-wrap gap-3\">\n            <button\n              type=\"button\"\n              onClick={() => fetchDashboard(dashboardId!)}\n              className=\"px-4 py-2 text-sm font-medium text-action-primary-fg bg-action-primary-bg hover:bg-action-primary-bgHover rounded-md\"\n            >\n              Retry\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => navigate('/dashboards')}\n              className=\"px-4 py-2 text-sm font-medium text-text-secondary bg-bg-sunken hover:bg-bg-sunken/80 rounded-md\"\n            >\n              Back to Dashboards\n            </button>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  // Not found state\n  if (notFound) {\n    return (\n      <div className=\"flex flex-col items-center justify-center h-full\" style={{ padding: 'var(--space-pagePadding)' }}>\n        <div className=\"bg-bg-surface border border-border-default rounded-lg p-6 w-full max-w-md text-center\">\n          <svg\n            className=\"w-16 h-16 mx-auto mb-4 text-text-tertiary\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={1.5}\n              d=\"M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n            />\n          </svg>\n          <h3 className=\"text-lg font-medium text-text-primary mb-2\">Dashboard not found</h3>\n          <p className=\"text-sm text-text-secondary mb-4\">\n            The dashboard you&apos;re looking for doesn&apos;t exist or has been deleted.\n          </p>\n          <p className=\"text-xs text-text-tertiary mb-4 font-mono break-all\">ID: {dashboardId}</p>\n          <button\n            type=\"button\"\n            onClick={() => navigate('/dashboards')}\n            className=\"px-4 py-2 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  // Loading state\n  if (loading || !currentDashboard) {\n    return (\n      <div className=\"flex items-center justify-center h-full\">\n        <div className=\"flex flex-col items-center gap-4\">\n          <div className=\"animate-spin w-8 h-8 border-4 border-action-primary-bg border-t-transparent rounded-full\" />\n          <p className=\"text-sm text-text-secondary\">Loading dashboard...</p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"h-full flex flex-col overflow-hidden\">\n      {/* Page header with back navigation - visible in both view and edit modes */}\n      <div className=\"flex items-center gap-3 px-3 py-2 border-b border-border-default bg-bg-surface flex-shrink-0\">\n        <Button\n          onClick={handleBack}\n          variant=\"ghost\"\n          size=\"sm\"\n          title=\"Back to Dashboards\"\n          aria-label=\"Back to Dashboards\"\n        >\n          <ArrowLeft className=\"w-4 h-4 mr-2\" />\n          Back\n        </Button>\n        <h2 className=\"text-sm font-semibold text-text-primary truncate\">{currentDashboard.name}</h2>\n      </div>\n\n      {/* Drilldown Breadcrumb - shown when navigating via drilldown */}\n      {isInDrilldown && (\n        <DrilldownBreadcrumb\n          currentDashboardId={currentDashboard.id}\n          currentDashboardName={currentDashboard.name}\n          basePath=\"/bigconsole/dashboards\"\n        />\n      )}\n\n      {/* Dashboard Canvas with Page Tabs */}\n      <div className=\"flex-1 min-w-0 overflow-hidden\">\n        <DashboardCanvas\n          dashboardId={currentDashboard.id}\n          pageId={currentPageId || currentDashboard.pages?.[0]?.id}\n          title={currentDashboard.name}\n          onPaste={handlePaste}\n          onSave={handleSave}\n          isSaving={isSaving}\n          onExport={handleExport}\n          // Page tabs props\n          pages={(currentDashboard.pages || []).map((page, index) => ({\n            id: page.id,\n            name: page.name || `Page ${index + 1}`,\n            order: page.order ?? 0,\n          }))}\n          activePageId={currentPageId || 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      </div>\n\n      {/* Export Dashboard Dialog */}\n      <ExportDashboardDialog\n        isOpen={isExportDialogOpen}\n        dashboardId={currentDashboard.id}\n        dashboardName={currentDashboard.name}\n        onClose={handleExportClose}\n      />\n    </div>\n  );\n});\n\nexport default DashboardViewPage;\n"],"mappings":"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"}

package/dist/bigconsole/pages/DashboardsPage.js

@@ -565,7 +565,7 @@ var E = "bf-bigconsole-dashboards-view", D = 12, O = c(function() {
 														padding: 0,
 														borderRadius: "var(--radius-button)"
 													},
-													className: "hover:text-destructive hover:bg-destructive/10",
+													className: "hover:text-status-error-text hover:bg-status-error-bg/10",
 													title: k("bigconsole.dashboards.actions.deleteTitle", "Delete Dashboard"),
 													children: /* @__PURE__ */ x(y, { style: {
 														height: "var(--size-icon-sm)",
@@ -801,7 +801,7 @@ var E = "bf-bigconsole-dashboards-view", D = 12, O = c(function() {
 														padding: 0,
 														borderRadius: "var(--radius-button)"
 													},
-													className: "hover:text-destructive hover:bg-destructive/10",
+													className: "hover:text-status-error-text hover:bg-status-error-bg/10",
 													title: k("bigconsole.dashboards.actions.deleteTitle", "Delete Dashboard"),
 													children: /* @__PURE__ */ x(y, { style: {
 														height: "var(--size-icon-sm)",

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardsPage.js","names":[],"sources":["../../../src/bigconsole/pages/DashboardsPage.tsx"],"sourcesContent":["/**\n * DashboardsPage\n *\n * List and manage dashboards - fetches data from real backend.\n * Uses fe-libs shared UI components and semantic tokens for consistent styling.\n */\n\nimport { type FC, memo, useState, useCallback, useEffect } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useBigConsoleNavigate } from '../context';\nimport { isNative, nativeConfirm, nativeImpact, nativeNotify } from '../../utils/nativeBridge';\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { Input } from '@burdenoff/fe-libs/ui';\nimport { Card, CardContent } from '@burdenoff/fe-libs/ui';\nimport { Badge } from '@burdenoff/fe-libs/ui';\nimport { Spinner } from '@burdenoff/fe-libs/ui';\nimport {\n  Plus,\n  Upload,\n  Search,\n  LayoutDashboard,\n  Calendar,\n  Layers,\n  FileText,\n  Pencil,\n  Trash2,\n  Copy,\n  FolderOpen,\n  LayoutGrid,\n  List,\n  ChevronLeft,\n  ChevronRight,\n} from 'lucide-react';\nimport { useDashboardOperations } from '../hooks';\nimport { CreateDashboardDialog } from '../components/dashboard/CreateDashboardDialog';\nimport { ImportDashboardDialog } from '../components/dashboard/ImportDashboardDialog';\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst VIEW_MODE_STORAGE_KEY = 'bf-bigconsole-dashboards-view';\n\n/** Number of dashboards shown per page in the list/grid views. */\nconst PAGE_SIZE = 12;\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DashboardsPage: FC = memo(function DashboardsPage() {\n  const navigate = useBigConsoleNavigate();\n  const { t } = useI18n();\n  const tr = useCallback(\n    (key: string, fallback: string) => {\n      const translated = t(key);\n      return translated === key ? fallback : translated;\n    },\n    [t]\n  );\n  const [searchQuery, setSearchQuery] = useState('');\n  const [currentPage, setCurrentPage] = useState(1);\n  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);\n  const [isCreating, setIsCreating] = useState(false);\n  const [isImportDialogOpen, setIsImportDialogOpen] = useState(false);\n\n  // View mode (grid/list) persisted to localStorage so it survives reloads\n  const [viewMode, setViewMode] = useState<'grid' | 'list'>(() => {\n    try {\n      const stored = window.localStorage.getItem(VIEW_MODE_STORAGE_KEY);\n      return stored === 'list' ? 'list' : 'grid';\n    } catch {\n      return 'grid';\n    }\n  });\n\n  const handleSetViewMode = useCallback((mode: 'grid' | 'list') => {\n    setViewMode(mode);\n    try {\n      window.localStorage.setItem(VIEW_MODE_STORAGE_KEY, mode);\n    } catch {\n      // Ignore storage errors (e.g. private mode) - view mode still works in-session\n    }\n  }, []);\n\n  const { loading, error, dashboards, createDashboard, deleteDashboard, cloneDashboard, refetch } =\n    useDashboardOperations();\n\n  // Filter dashboards by search query\n  const filteredDashboards = dashboards.filter(\n    (d) =>\n      d.name.toLowerCase().includes(searchQuery.toLowerCase()) ||\n      d.description?.toLowerCase().includes(searchQuery.toLowerCase())\n  );\n\n  // Client-side pagination over the filtered result set\n  const totalPages = Math.max(1, Math.ceil(filteredDashboards.length / PAGE_SIZE));\n  const pageStartIndex = (currentPage - 1) * PAGE_SIZE;\n  const paginatedDashboards = filteredDashboards.slice(pageStartIndex, pageStartIndex + PAGE_SIZE);\n\n  // Reset to the first page when the search query or view changes so the\n  // visible slice always starts from the top of the (possibly new) result set.\n  useEffect(() => {\n    setCurrentPage(1);\n  }, [searchQuery, viewMode]);\n\n  // Guard against the current page exceeding the available pages (e.g. after a\n  // delete removes the last item on the final page).\n  useEffect(() => {\n    if (currentPage > totalPages) {\n      setCurrentPage(totalPages);\n    }\n  }, [currentPage, totalPages]);\n\n  const handlePrevPage = useCallback(() => {\n    setCurrentPage((prev) => Math.max(1, prev - 1));\n  }, []);\n\n  const handleNextPage = useCallback(() => {\n    setCurrentPage((prev) => Math.min(totalPages, prev + 1));\n  }, [totalPages]);\n\n  const handleGoToPage = useCallback((page: number) => {\n    setCurrentPage(page);\n  }, []);\n\n  const handleOpenCreateDialog = useCallback(() => {\n    setIsCreateDialogOpen(true);\n  }, []);\n\n  const handleCloseCreateDialog = useCallback(() => {\n    if (!isCreating) {\n      setIsCreateDialogOpen(false);\n    }\n  }, [isCreating]);\n\n  const handleCreateDashboard = useCallback(\n    async (data: { name: string; description: string; category: string; tags?: string[] }) => {\n      setIsCreating(true);\n      try {\n        const newDashboard = await createDashboard({\n          name: data.name,\n          description: data.description,\n          category: data.category,\n          tags: data.tags,\n        });\n\n        if (newDashboard) {\n          setIsCreateDialogOpen(false);\n          navigate(`/dashboards/${newDashboard.id}/builder`);\n        }\n      } catch (err) {\n        // Surface the failure instead of swallowing it: log for debugging,\n        // notify on native, and rethrow so CreateDashboardDialog displays the error.\n        console.error('Failed to create dashboard:', err);\n        if (isNative()) void nativeNotify('error');\n        throw err;\n      } finally {\n        setIsCreating(false);\n      }\n    },\n    [createDashboard, navigate]\n  );\n\n  const handleOpenDashboard = useCallback(\n    (dashboardId: string) => {\n      navigate(`/dashboards/${dashboardId}`);\n    },\n    [navigate]\n  );\n\n  const handleEditDashboard = useCallback(\n    (dashboardId: string, e: React.MouseEvent) => {\n      e.stopPropagation();\n      navigate(`/dashboards/${dashboardId}/builder`);\n    },\n    [navigate]\n  );\n\n  const handleDeleteDashboard = useCallback(\n    async (dashboardId: string, e: React.MouseEvent) => {\n      e.stopPropagation();\n      const msg = tr('bigconsole.dashboards.confirmDelete', 'Are you sure you want to delete this dashboard?');\n      const native = await nativeConfirm({\n        title: 'Delete dashboard?',\n        message: msg,\n        okButtonTitle: 'Delete',\n        cancelButtonTitle: 'Cancel',\n      });\n      const ok = native === null ? window.confirm(msg) : native;\n      if (ok) {\n        nativeImpact('medium');\n        try {\n          await deleteDashboard(dashboardId);\n          if (isNative()) void nativeNotify('success');\n        } catch (err) {\n          if (isNative()) void nativeNotify('error');\n          throw err;\n        }\n      }\n    },\n    [deleteDashboard, tr]\n  );\n\n  const handleCloneDashboard = useCallback(\n    async (dashboardId: string, sourceName: string, e: React.MouseEvent) => {\n      e.stopPropagation();\n      const defaultName = tr('bigconsole.dashboards.clone.defaultSuffix', `${sourceName} (Copy)`);\n      const name = window.prompt(\n        tr('bigconsole.dashboards.clone.namePrompt', 'Name for the cloned dashboard:'),\n        defaultName\n      );\n      if (!name || !name.trim()) return;\n      nativeImpact('medium');\n      try {\n        const cloned = await cloneDashboard(dashboardId, name.trim());\n        if (cloned) {\n          if (isNative()) void nativeNotify('success');\n          navigate(`/dashboards/${cloned.id}`);\n        }\n      } catch (err) {\n        if (isNative()) void nativeNotify('error');\n        throw err;\n      }\n    },\n    [cloneDashboard, navigate, tr]\n  );\n\n  const handleOpenImportDialog = useCallback(() => {\n    setIsImportDialogOpen(true);\n  }, []);\n\n  const handleCloseImportDialog = useCallback(() => {\n    setIsImportDialogOpen(false);\n  }, []);\n\n  const handleImportSuccess = useCallback(\n    (dashboardId: string, dashboardName: string) => {\n      refetch();\n    },\n    [refetch]\n  );\n\n  // Format relative date\n  const formatRelativeDate = (dateStr: string) => {\n    const date = new Date(dateStr);\n    const now = new Date();\n    const diffMs = now.getTime() - date.getTime();\n    const diffMins = Math.floor(diffMs / 60000);\n    const diffHours = Math.floor(diffMs / 3600000);\n    const diffDays = Math.floor(diffMs / 86400000);\n\n    if (diffMins < 1) return tr('bigconsole.dashboards.time.justNow', 'Just now');\n    if (diffMins < 60) return `${diffMins}${tr('bigconsole.dashboards.time.minutesAgoSuffix', 'm ago')}`;\n    if (diffHours < 24) return `${diffHours}${tr('bigconsole.dashboards.time.hoursAgoSuffix', 'h ago')}`;\n    if (diffDays < 7) return `${diffDays}${tr('bigconsole.dashboards.time.daysAgoSuffix', 'd ago')}`;\n\n    return new Intl.DateTimeFormat('en-US', {\n      month: 'short',\n      day: 'numeric',\n      year: date.getFullYear() !== now.getFullYear() ? 'numeric' : undefined,\n    }).format(date);\n  };\n\n  // Get widget count - uses widgetCount field from backend\n  const getWidgetCount = (dashboard: (typeof dashboards)[0]) => {\n    return dashboard.widgetCount ?? 0;\n  };\n\n  // Get page count\n  const getPageCount = (dashboard: (typeof dashboards)[0]) => {\n    return dashboard.pageCount || 0;\n  };\n\n  // Error state\n  if (error) {\n    return (\n      <div style={{ padding: 'var(--space-pagePadding)' }}>\n        <Card\n          style={{\n            borderColor: 'var(--color-status-error-border)',\n            backgroundColor: 'var(--color-status-error-bgSubtle)',\n          }}\n        >\n          <CardContent style={{ padding: 'var(--space-pagePadding)' }}>\n            <h3\n              style={{\n                fontSize: 'var(--font-size-body-sm)',\n                fontWeight: 'var(--font-weight-medium)',\n                color: 'var(--color-status-error-text)',\n              }}\n            >\n              {tr('bigconsole.dashboards.error.title', 'Error loading dashboards')}\n            </h3>\n            <p\n              style={{\n                fontSize: 'var(--font-size-body-sm)',\n                color: 'var(--color-text-secondary)',\n                marginTop: 'var(--space-controlGap)',\n              }}\n            >\n              {error.message}\n            </p>\n            <Button size=\"sm\" onClick={() => refetch()} style={{ marginTop: 'var(--space-formGap)' }}>\n              {tr('bigconsole.dashboards.error.retry', 'Retry')}\n            </Button>\n          </CardContent>\n        </Card>\n      </div>\n    );\n  }\n\n  return (\n    <div style={{ minHeight: '100vh', backgroundColor: 'var(--color-bg-canvas)' }}>\n      {/* Header Section */}\n      <div style={{ borderBottom: '1px solid var(--color-border)', backgroundColor: 'var(--color-bg-surface)' }}>\n        <div style={{ padding: 'var(--space-pagePadding)' }}>\n          <div\n            style={{\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'space-between',\n              flexWrap: 'wrap',\n              gap: 'var(--space-formGap)',\n            }}\n          >\n            <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-formGap)', minWidth: 0 }}>\n              <div\n                style={{\n                  display: 'flex',\n                  height: 'var(--size-controlHeight-lg)',\n                  width: 'var(--size-controlHeight-lg)',\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                  borderRadius: 'var(--radius-card)',\n                  backgroundColor: 'var(--color-action-primary-bg)',\n                }}\n              >\n                <LayoutDashboard\n                  style={{\n                    height: 'var(--size-icon-lg)',\n                    width: 'var(--size-icon-lg)',\n                    color: 'var(--color-action-primary-text)',\n                  }}\n                />\n              </div>\n              <div>\n                <h1\n                  style={{\n                    fontSize: 'var(--font-size-heading-h4)',\n                    fontWeight: 'var(--font-weight-bold)',\n                    margin: 0,\n                    color: 'var(--color-text-primary)',\n                  }}\n                >\n                  {tr('bigconsole.dashboards.title', 'Dashboards')}\n                </h1>\n                <p style={{ fontSize: 'var(--font-size-body-sm)', color: 'var(--color-text-secondary)', margin: 0 }}>\n                  {tr('bigconsole.dashboards.subtitle', 'Create and manage your analytics dashboards')}\n                </p>\n              </div>\n            </div>\n\n            <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-controlGap)', flexWrap: 'wrap' }}>\n              <Button variant=\"outline\" onClick={handleOpenImportDialog}>\n                <Upload\n                  style={{\n                    marginRight: 'var(--space-iconGap)',\n                    height: 'var(--size-icon-sm)',\n                    width: 'var(--size-icon-sm)',\n                  }}\n                />\n                {tr('bigconsole.dashboards.actions.import', 'Import')}\n              </Button>\n              <Button onClick={handleOpenCreateDialog}>\n                <Plus\n                  style={{\n                    marginRight: 'var(--space-iconGap)',\n                    height: 'var(--size-icon-sm)',\n                    width: 'var(--size-icon-sm)',\n                  }}\n                />\n                {tr('bigconsole.dashboards.actions.create', 'Create Dashboard')}\n              </Button>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {/* Main Content */}\n      <div style={{ padding: 'var(--space-pagePadding)' }}>\n        {/* Search Bar + View Toggle */}\n        <div\n          style={{\n            marginBottom: 'var(--space-sectionGap)',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'space-between',\n            flexWrap: 'wrap',\n            gap: 'var(--space-formGap)',\n          }}\n        >\n          <div style={{ position: 'relative', flex: 1, minWidth: 0, maxWidth: '400px' }}>\n            <Search\n              style={{\n                position: 'absolute',\n                left: 'var(--space-controlGap)',\n                top: '50%',\n                transform: 'translateY(-50%)',\n                height: 'var(--size-icon-sm)',\n                width: 'var(--size-icon-sm)',\n                color: 'var(--color-text-muted)',\n              }}\n            />\n            <Input\n              type=\"text\"\n              placeholder={tr('bigconsole.dashboards.search.placeholder', 'Search dashboards...')}\n              value={searchQuery}\n              onChange={(e) => setSearchQuery(e.target.value)}\n              style={{ paddingLeft: 'var(--size-controlHeight-md)', height: 'var(--size-controlHeight-md)' }}\n            />\n          </div>\n\n          {/* Grid / List view toggle */}\n          <div\n            style={{\n              display: 'flex',\n              alignItems: 'center',\n              gap: 'var(--space-iconGap)',\n              padding: 'var(--space-iconGap)',\n              borderRadius: 'var(--radius-button)',\n              backgroundColor: 'var(--color-bg-sunken)',\n            }}\n          >\n            <Button\n              variant={viewMode === 'grid' ? 'default' : 'ghost'}\n              size=\"sm\"\n              onClick={() => handleSetViewMode('grid')}\n              aria-label={tr('bigconsole.dashboards.view.grid', 'Grid view')}\n              aria-pressed={viewMode === 'grid'}\n              title={tr('bigconsole.dashboards.view.grid', 'Grid view')}\n              style={{\n                height: 'var(--size-controlHeight-sm)',\n                width: 'var(--size-controlHeight-sm)',\n                padding: 0,\n                borderRadius: 'var(--radius-button)',\n              }}\n            >\n              <LayoutGrid style={{ height: 'var(--size-icon-sm)', width: 'var(--size-icon-sm)' }} />\n            </Button>\n            <Button\n              variant={viewMode === 'list' ? 'default' : 'ghost'}\n              size=\"sm\"\n              onClick={() => handleSetViewMode('list')}\n              aria-label={tr('bigconsole.dashboards.view.list', 'List view')}\n              aria-pressed={viewMode === 'list'}\n              title={tr('bigconsole.dashboards.view.list', 'List view')}\n              style={{\n                height: 'var(--size-controlHeight-sm)',\n                width: 'var(--size-controlHeight-sm)',\n                padding: 0,\n                borderRadius: 'var(--radius-button)',\n              }}\n            >\n              <List style={{ height: 'var(--size-icon-sm)', width: 'var(--size-icon-sm)' }} />\n            </Button>\n          </div>\n        </div>\n\n        {/* Loading state */}\n        {loading && dashboards.length === 0 && (\n          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '80px 0' }}>\n            <div style={{ textAlign: 'center' }}>\n              <Spinner\n                style={{\n                  height: 'var(--size-icon-xl)',\n                  width: 'var(--size-icon-xl)',\n                  margin: '0 auto var(--space-formGap)',\n                }}\n              />\n              <p style={{ fontSize: 'var(--font-size-body-sm)', color: 'var(--color-text-muted)' }}>\n                {tr('bigconsole.dashboards.loading', 'Loading dashboards...')}\n              </p>\n            </div>\n          </div>\n        )}\n\n        {/* Dashboard Grid */}\n        {!loading && viewMode === 'grid' && filteredDashboards.length > 0 && (\n          <div\n            style={{\n              display: 'grid',\n              gridTemplateColumns: 'repeat(auto-fill, minmax(min(320px, 100%), 1fr))',\n              gap: 'var(--space-formGap)',\n            }}\n          >\n            {paginatedDashboards.map((dashboard) => (\n              <Card\n                key={dashboard.id}\n                onClick={() => handleOpenDashboard(dashboard.id)}\n                style={{\n                  cursor: 'pointer',\n                  transition: 'all 0.2s ease',\n                }}\n                className=\"hover:shadow-md hover:border-primary/50\"\n              >\n                <CardContent style={{ padding: 'var(--space-cardPadding)' }}>\n                  {/* Card Header with Icon and Name */}\n                  <div\n                    style={{\n                      display: 'flex',\n                      alignItems: 'center',\n                      gap: 'var(--space-controlGap)',\n                      marginBottom: 'var(--space-formGap)',\n                    }}\n                  >\n                    <div\n                      style={{\n                        display: 'flex',\n                        height: 'var(--size-controlHeight-lg)',\n                        width: 'var(--size-controlHeight-lg)',\n                        flexShrink: 0,\n                        alignItems: 'center',\n                        justifyContent: 'center',\n                        borderRadius: 'var(--radius-button)',\n                        backgroundColor: 'var(--color-action-primary-bg)',\n                      }}\n                    >\n                      <LayoutDashboard\n                        style={{\n                          height: 'var(--size-icon-md)',\n                          width: 'var(--size-icon-md)',\n                          color: 'var(--color-action-primary-text)',\n                        }}\n                      />\n                    </div>\n                    <div style={{ flex: 1, minWidth: 0 }}>\n                      <h3\n                        style={{\n                          fontWeight: 'var(--font-weight-bold)',\n                          fontSize: 'var(--font-size-body-md)',\n                          margin: 0,\n                          color: 'var(--color-text-primary)',\n                          overflow: 'hidden',\n                          textOverflow: 'ellipsis',\n                          whiteSpace: 'nowrap',\n                        }}\n                      >\n                        {dashboard.name}\n                      </h3>\n                      {dashboard.category && (\n                        <Badge\n                          variant=\"secondary\"\n                          style={{\n                            marginTop: 'var(--space-controlGap)',\n                            fontSize: '10px',\n                            fontWeight: 'var(--font-weight-semibold)',\n                            textTransform: 'uppercase',\n                          }}\n                        >\n                          {dashboard.category}\n                        </Badge>\n                      )}\n                    </div>\n                  </div>\n\n                  {/* Description */}\n                  <p\n                    style={{\n                      fontSize: 'var(--font-size-body-sm)',\n                      lineHeight: 'var(--font-lineHeight-normal)',\n                      color: 'var(--color-text-secondary)',\n                      margin: '0 0 var(--space-formGap) 0',\n                      minHeight: '40px',\n                      display: '-webkit-box',\n                      WebkitLineClamp: 2,\n                      WebkitBoxOrient: 'vertical',\n                      overflow: 'hidden',\n                    }}\n                  >\n                    {dashboard.description || tr('bigconsole.dashboards.card.noDescription', 'No description provided')}\n                  </p>\n\n                  {/* Stats Row */}\n                  <div\n                    style={{\n                      display: 'flex',\n                      alignItems: 'center',\n                      gap: 'var(--space-formGap)',\n                      marginBottom: 'var(--space-formGap)',\n                      padding: 'var(--space-controlGap) var(--space-cardPadding)',\n                      backgroundColor: 'var(--color-bg-sunken)',\n                      borderRadius: 'var(--radius-button)',\n                    }}\n                  >\n                    <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-iconGap)' }}>\n                      <Layers\n                        style={{\n                          height: 'var(--size-icon-sm)',\n                          width: 'var(--size-icon-sm)',\n                          color: 'var(--color-action-primary-bg)',\n                        }}\n                      />\n                      <span\n                        style={{\n                          fontSize: 'var(--font-size-body-sm)',\n                          fontWeight: 'var(--font-weight-semibold)',\n                          color: 'var(--color-text-primary)',\n                        }}\n                      >\n                        {getPageCount(dashboard)}\n                      </span>\n                      <span style={{ fontSize: 'var(--font-size-body-sm)', color: 'var(--color-text-muted)' }}>\n                        {tr('bigconsole.dashboards.card.pages', 'pages')}\n                      </span>\n                    </div>\n                    <div\n                      style={{ width: '1px', height: 'var(--size-icon-sm)', backgroundColor: 'var(--color-border)' }}\n                    />\n                    <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-iconGap)' }}>\n                      <FileText\n                        style={{\n                          height: 'var(--size-icon-sm)',\n                          width: 'var(--size-icon-sm)',\n                          color: 'var(--color-action-primary-bg)',\n                        }}\n                      />\n                      <span\n                        style={{\n                          fontSize: 'var(--font-size-body-sm)',\n                          fontWeight: 'var(--font-weight-semibold)',\n                          color: 'var(--color-text-primary)',\n                        }}\n                      >\n                        {getWidgetCount(dashboard)}\n                      </span>\n                      <span style={{ fontSize: 'var(--font-size-body-sm)', color: 'var(--color-text-muted)' }}>\n                        {tr('bigconsole.dashboards.card.widgets', 'widgets')}\n                      </span>\n                    </div>\n                  </div>\n\n                  {/* Footer with Date and Actions */}\n                  <div\n                    style={{\n                      display: 'flex',\n                      alignItems: 'center',\n                      justifyContent: 'space-between',\n                      paddingTop: 'var(--space-controlGap)',\n                      borderTop: '1px solid var(--color-border)',\n                    }}\n                  >\n                    <div\n                      style={{\n                        display: 'flex',\n                        alignItems: 'center',\n                        gap: 'var(--space-iconGap)',\n                      }}\n                    >\n                      <Calendar\n                        style={{\n                          height: 'var(--size-icon-sm)',\n                          width: 'var(--size-icon-sm)',\n                          color: 'var(--color-text-muted)',\n                        }}\n                      />\n                      <span\n                        style={{\n                          fontSize: 'var(--font-size-body-sm)',\n                          fontWeight: 'var(--font-weight-medium)',\n                          color: 'var(--color-text-muted)',\n                        }}\n                      >\n                        {formatRelativeDate(dashboard.updatedAt)}\n                      </span>\n                    </div>\n\n                    <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-controlGap)' }}>\n                      <Button\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        onClick={(e) => handleEditDashboard(dashboard.id, e)}\n                        style={{\n                          height: 'var(--size-controlHeight-sm)',\n                          width: 'var(--size-controlHeight-sm)',\n                          padding: 0,\n                          borderRadius: 'var(--radius-button)',\n                        }}\n                        title={tr('bigconsole.dashboards.actions.editTitle', 'Edit Dashboard')}\n                      >\n                        <Pencil style={{ height: 'var(--size-icon-sm)', width: 'var(--size-icon-sm)' }} />\n                      </Button>\n                      <Button\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        onClick={(e) => handleCloneDashboard(dashboard.id, dashboard.name, e)}\n                        style={{\n                          height: 'var(--size-controlHeight-sm)',\n                          width: 'var(--size-controlHeight-sm)',\n                          padding: 0,\n                          borderRadius: 'var(--radius-button)',\n                        }}\n                        title={tr('bigconsole.dashboards.actions.cloneTitle', 'Clone Dashboard')}\n                      >\n                        <Copy style={{ height: 'var(--size-icon-sm)', width: 'var(--size-icon-sm)' }} />\n                      </Button>\n                      <Button\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        onClick={(e) => handleDeleteDashboard(dashboard.id, e)}\n                        style={{\n                          height: 'var(--size-controlHeight-sm)',\n                          width: 'var(--size-controlHeight-sm)',\n                          padding: 0,\n                          borderRadius: 'var(--radius-button)',\n                        }}\n                        className=\"hover:text-destructive hover:bg-destructive/10\"\n                        title={tr('bigconsole.dashboards.actions.deleteTitle', 'Delete Dashboard')}\n                      >\n                        <Trash2 style={{ height: 'var(--size-icon-sm)', width: 'var(--size-icon-sm)' }} />\n                      </Button>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n            ))}\n          </div>\n        )}\n\n        {/* Dashboard List */}\n        {!loading && viewMode === 'list' && filteredDashboards.length > 0 && (\n          <div\n            style={{\n              display: 'flex',\n              flexDirection: 'column',\n              gap: 'var(--space-controlGap)',\n            }}\n          >\n            {paginatedDashboards.map((dashboard) => (\n              <Card\n                key={dashboard.id}\n                onClick={() => handleOpenDashboard(dashboard.id)}\n                style={{\n                  cursor: 'pointer',\n                  transition: 'all 0.2s ease',\n                }}\n                className=\"hover:shadow-md hover:border-primary/50\"\n              >\n                <CardContent style={{ padding: 'var(--space-cardPadding)' }}>\n                  <div\n                    style={{\n                      display: 'flex',\n                      alignItems: 'center',\n                      gap: 'var(--space-formGap)',\n                      flexWrap: 'wrap',\n                    }}\n                  >\n                    {/* Icon */}\n                    <div\n                      style={{\n                        display: 'flex',\n                        height: 'var(--size-controlHeight-lg)',\n                        width: 'var(--size-controlHeight-lg)',\n                        flexShrink: 0,\n                        alignItems: 'center',\n                        justifyContent: 'center',\n                        borderRadius: 'var(--radius-button)',\n                        backgroundColor: 'var(--color-action-primary-bg)',\n                      }}\n                    >\n                      <LayoutDashboard\n                        style={{\n                          height: 'var(--size-icon-md)',\n                          width: 'var(--size-icon-md)',\n                          color: 'var(--color-action-primary-text)',\n                        }}\n                      />\n                    </div>\n\n                    {/* Name + Description */}\n                    <div style={{ flex: 1, minWidth: '180px' }}>\n                      <div\n                        style={{\n                          display: 'flex',\n                          alignItems: 'center',\n                          gap: 'var(--space-controlGap)',\n                          flexWrap: 'wrap',\n                        }}\n                      >\n                        <h3\n                          style={{\n                            fontWeight: 'var(--font-weight-bold)',\n                            fontSize: 'var(--font-size-body-md)',\n                            margin: 0,\n                            color: 'var(--color-text-primary)',\n                            overflow: 'hidden',\n                            textOverflow: 'ellipsis',\n                            whiteSpace: 'nowrap',\n                            maxWidth: '100%',\n                          }}\n                        >\n                          {dashboard.name}\n                        </h3>\n                        {dashboard.category && (\n                          <Badge\n                            variant=\"secondary\"\n                            style={{\n                              fontSize: '10px',\n                              fontWeight: 'var(--font-weight-semibold)',\n                              textTransform: 'uppercase',\n                            }}\n                          >\n                            {dashboard.category}\n                          </Badge>\n                        )}\n                      </div>\n                      <p\n                        style={{\n                          fontSize: 'var(--font-size-body-sm)',\n                          lineHeight: 'var(--font-lineHeight-normal)',\n                          color: 'var(--color-text-secondary)',\n                          margin: 'var(--space-controlGap) 0 0 0',\n                          overflow: 'hidden',\n                          textOverflow: 'ellipsis',\n                          whiteSpace: 'nowrap',\n                        }}\n                      >\n                        {dashboard.description ||\n                          tr('bigconsole.dashboards.card.noDescription', 'No description provided')}\n                      </p>\n                    </div>\n\n                    {/* Stats + Date */}\n                    <div\n                      style={{\n                        display: 'flex',\n                        alignItems: 'center',\n                        gap: 'var(--space-formGap)',\n                        flexWrap: 'wrap',\n                      }}\n                    >\n                      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-iconGap)' }}>\n                        <Layers\n                          style={{\n                            height: 'var(--size-icon-sm)',\n                            width: 'var(--size-icon-sm)',\n                            color: 'var(--color-action-primary-bg)',\n                          }}\n                        />\n                        <span\n                          style={{\n                            fontSize: 'var(--font-size-body-sm)',\n                            fontWeight: 'var(--font-weight-semibold)',\n                            color: 'var(--color-text-primary)',\n                          }}\n                        >\n                          {getPageCount(dashboard)}\n                        </span>\n                        <span style={{ fontSize: 'var(--font-size-body-sm)', color: 'var(--color-text-muted)' }}>\n                          {tr('bigconsole.dashboards.card.pages', 'pages')}\n                        </span>\n                      </div>\n                      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-iconGap)' }}>\n                        <FileText\n                          style={{\n                            height: 'var(--size-icon-sm)',\n                            width: 'var(--size-icon-sm)',\n                            color: 'var(--color-action-primary-bg)',\n                          }}\n                        />\n                        <span\n                          style={{\n                            fontSize: 'var(--font-size-body-sm)',\n                            fontWeight: 'var(--font-weight-semibold)',\n                            color: 'var(--color-text-primary)',\n                          }}\n                        >\n                          {getWidgetCount(dashboard)}\n                        </span>\n                        <span style={{ fontSize: 'var(--font-size-body-sm)', color: 'var(--color-text-muted)' }}>\n                          {tr('bigconsole.dashboards.card.widgets', 'widgets')}\n                        </span>\n                      </div>\n                      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-iconGap)' }}>\n                        <Calendar\n                          style={{\n                            height: 'var(--size-icon-sm)',\n                            width: 'var(--size-icon-sm)',\n                            color: 'var(--color-text-muted)',\n                          }}\n                        />\n                        <span\n                          style={{\n                            fontSize: 'var(--font-size-body-sm)',\n                            fontWeight: 'var(--font-weight-medium)',\n                            color: 'var(--color-text-muted)',\n                          }}\n                        >\n                          {formatRelativeDate(dashboard.updatedAt)}\n                        </span>\n                      </div>\n                    </div>\n\n                    {/* Actions */}\n                    <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-controlGap)' }}>\n                      <Button\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        onClick={(e) => handleEditDashboard(dashboard.id, e)}\n                        style={{\n                          height: 'var(--size-controlHeight-sm)',\n                          width: 'var(--size-controlHeight-sm)',\n                          padding: 0,\n                          borderRadius: 'var(--radius-button)',\n                        }}\n                        title={tr('bigconsole.dashboards.actions.editTitle', 'Edit Dashboard')}\n                      >\n                        <Pencil style={{ height: 'var(--size-icon-sm)', width: 'var(--size-icon-sm)' }} />\n                      </Button>\n                      <Button\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        onClick={(e) => handleCloneDashboard(dashboard.id, dashboard.name, e)}\n                        style={{\n                          height: 'var(--size-controlHeight-sm)',\n                          width: 'var(--size-controlHeight-sm)',\n                          padding: 0,\n                          borderRadius: 'var(--radius-button)',\n                        }}\n                        title={tr('bigconsole.dashboards.actions.cloneTitle', 'Clone Dashboard')}\n                      >\n                        <Copy style={{ height: 'var(--size-icon-sm)', width: 'var(--size-icon-sm)' }} />\n                      </Button>\n                      <Button\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        onClick={(e) => handleDeleteDashboard(dashboard.id, e)}\n                        style={{\n                          height: 'var(--size-controlHeight-sm)',\n                          width: 'var(--size-controlHeight-sm)',\n                          padding: 0,\n                          borderRadius: 'var(--radius-button)',\n                        }}\n                        className=\"hover:text-destructive hover:bg-destructive/10\"\n                        title={tr('bigconsole.dashboards.actions.deleteTitle', 'Delete Dashboard')}\n                      >\n                        <Trash2 style={{ height: 'var(--size-icon-sm)', width: 'var(--size-icon-sm)' }} />\n                      </Button>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n            ))}\n          </div>\n        )}\n\n        {/* Pagination controls */}\n        {!loading && filteredDashboards.length > PAGE_SIZE && (\n          <div\n            style={{\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n              gap: 'var(--space-controlGap)',\n              flexWrap: 'wrap',\n              marginTop: 'var(--space-sectionGap)',\n            }}\n          >\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={handlePrevPage}\n              disabled={currentPage <= 1}\n              aria-label={tr('bigconsole.dashboards.pagination.previous', 'Previous')}\n            >\n              <ChevronLeft\n                style={{\n                  marginRight: 'var(--space-iconGap)',\n                  height: 'var(--size-icon-sm)',\n                  width: 'var(--size-icon-sm)',\n                }}\n              />\n              {tr('bigconsole.dashboards.pagination.previous', 'Previous')}\n            </Button>\n\n            <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-iconGap)', flexWrap: 'wrap' }}>\n              {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (\n                <Button\n                  key={page}\n                  variant={page === currentPage ? 'default' : 'ghost'}\n                  size=\"sm\"\n                  onClick={() => handleGoToPage(page)}\n                  aria-current={page === currentPage ? 'page' : undefined}\n                  style={{\n                    minWidth: 'var(--size-controlHeight-sm)',\n                    height: 'var(--size-controlHeight-sm)',\n                    padding: '0 var(--space-controlGap)',\n                    borderRadius: 'var(--radius-button)',\n                  }}\n                >\n                  {page}\n                </Button>\n              ))}\n            </div>\n\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={handleNextPage}\n              disabled={currentPage >= totalPages}\n              aria-label={tr('bigconsole.dashboards.pagination.next', 'Next')}\n            >\n              {tr('bigconsole.dashboards.pagination.next', 'Next')}\n              <ChevronRight\n                style={{\n                  marginLeft: 'var(--space-iconGap)',\n                  height: 'var(--size-icon-sm)',\n                  width: 'var(--size-icon-sm)',\n                }}\n              />\n            </Button>\n\n            <span\n              style={{\n                fontSize: 'var(--font-size-body-sm)',\n                color: 'var(--color-text-muted)',\n                marginLeft: 'var(--space-controlGap)',\n              }}\n            >\n              {tr('bigconsole.dashboards.pagination.pageOf', `Page ${currentPage} of ${totalPages}`)}\n            </span>\n          </div>\n        )}\n\n        {/* Empty state */}\n        {!loading && filteredDashboards.length === 0 && (\n          <Card className=\"border-dashed\">\n            <CardContent\n              style={{\n                display: 'flex',\n                flexDirection: 'column',\n                alignItems: 'center',\n                justifyContent: 'center',\n                padding: '64px var(--space-pagePadding)',\n              }}\n            >\n              <div\n                style={{\n                  display: 'flex',\n                  height: '80px',\n                  width: '80px',\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                  borderRadius: '50%',\n                  backgroundColor: 'var(--color-bg-sunken)',\n                  marginBottom: 'var(--space-sectionGap)',\n                }}\n              >\n                <FolderOpen\n                  style={{\n                    height: 'var(--size-icon-xl)',\n                    width: 'var(--size-icon-xl)',\n                    color: 'var(--color-text-muted)',\n                  }}\n                />\n              </div>\n              <h3\n                style={{\n                  fontSize: 'var(--font-size-heading-h4)',\n                  fontWeight: 'var(--font-weight-semibold)',\n                  marginBottom: 'var(--space-controlGap)',\n                }}\n              >\n                {searchQuery\n                  ? tr('bigconsole.dashboards.empty.filteredTitle', 'No dashboards found')\n                  : tr('bigconsole.dashboards.empty.title', 'No dashboards yet')}\n              </h3>\n              <p\n                style={{\n                  fontSize: 'var(--font-size-body-sm)',\n                  color: 'var(--color-text-muted)',\n                  marginBottom: 'var(--space-sectionGap)',\n                  textAlign: 'center',\n                  maxWidth: '360px',\n                }}\n              >\n                {searchQuery\n                  ? tr('bigconsole.dashboards.empty.filteredDescription', 'Try adjusting your search terms')\n                  : tr(\n                      'bigconsole.dashboards.empty.description',\n                      'Get started by creating your first dashboard to visualize your data'\n                    )}\n              </p>\n              {!searchQuery && (\n                <div\n                  style={{\n                    display: 'flex',\n                    gap: 'var(--space-controlGap)',\n                    flexWrap: 'wrap',\n                    justifyContent: 'center',\n                  }}\n                >\n                  <Button variant=\"outline\" onClick={handleOpenImportDialog}>\n                    <Upload\n                      style={{\n                        marginRight: 'var(--space-iconGap)',\n                        height: 'var(--size-icon-sm)',\n                        width: 'var(--size-icon-sm)',\n                      }}\n                    />\n                    {tr('bigconsole.dashboards.actions.importDashboard', 'Import Dashboard')}\n                  </Button>\n                  <Button onClick={handleOpenCreateDialog}>\n                    <Plus\n                      style={{\n                        marginRight: 'var(--space-iconGap)',\n                        height: 'var(--size-icon-sm)',\n                        width: 'var(--size-icon-sm)',\n                      }}\n                    />\n                    {tr('bigconsole.dashboards.actions.create', 'Create Dashboard')}\n                  </Button>\n                </div>\n              )}\n            </CardContent>\n          </Card>\n        )}\n      </div>\n\n      {/* Create Dashboard Dialog */}\n      <CreateDashboardDialog\n        isOpen={isCreateDialogOpen}\n        isCreating={isCreating}\n        onClose={handleCloseCreateDialog}\n        onCreate={handleCreateDashboard}\n      />\n\n      {/* Import Dashboard Dialog */}\n      <ImportDashboardDialog\n        isOpen={isImportDialogOpen}\n        onClose={handleCloseImportDialog}\n        onSuccess={handleImportSuccess}\n      />\n    </div>\n  );\n});\n\nexport default DashboardsPage;\n"],"mappings":"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"}
+{"version":3,"file":"DashboardsPage.js","names":[],"sources":["../../../src/bigconsole/pages/DashboardsPage.tsx"],"sourcesContent":["/**\n * DashboardsPage\n *\n * List and manage dashboards - fetches data from real backend.\n * Uses fe-libs shared UI components and semantic tokens for consistent styling.\n */\n\nimport { type FC, memo, useState, useCallback, useEffect } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useBigConsoleNavigate } from '../context';\nimport { isNative, nativeConfirm, nativeImpact, nativeNotify } from '../../utils/nativeBridge';\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { Input } from '@burdenoff/fe-libs/ui';\nimport { Card, CardContent } from '@burdenoff/fe-libs/ui';\nimport { Badge } from '@burdenoff/fe-libs/ui';\nimport { Spinner } from '@burdenoff/fe-libs/ui';\nimport {\n  Plus,\n  Upload,\n  Search,\n  LayoutDashboard,\n  Calendar,\n  Layers,\n  FileText,\n  Pencil,\n  Trash2,\n  Copy,\n  FolderOpen,\n  LayoutGrid,\n  List,\n  ChevronLeft,\n  ChevronRight,\n} from 'lucide-react';\nimport { useDashboardOperations } from '../hooks';\nimport { CreateDashboardDialog } from '../components/dashboard/CreateDashboardDialog';\nimport { ImportDashboardDialog } from '../components/dashboard/ImportDashboardDialog';\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst VIEW_MODE_STORAGE_KEY = 'bf-bigconsole-dashboards-view';\n\n/** Number of dashboards shown per page in the list/grid views. */\nconst PAGE_SIZE = 12;\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DashboardsPage: FC = memo(function DashboardsPage() {\n  const navigate = useBigConsoleNavigate();\n  const { t } = useI18n();\n  const tr = useCallback(\n    (key: string, fallback: string) => {\n      const translated = t(key);\n      return translated === key ? fallback : translated;\n    },\n    [t]\n  );\n  const [searchQuery, setSearchQuery] = useState('');\n  const [currentPage, setCurrentPage] = useState(1);\n  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);\n  const [isCreating, setIsCreating] = useState(false);\n  const [isImportDialogOpen, setIsImportDialogOpen] = useState(false);\n\n  // View mode (grid/list) persisted to localStorage so it survives reloads\n  const [viewMode, setViewMode] = useState<'grid' | 'list'>(() => {\n    try {\n      const stored = window.localStorage.getItem(VIEW_MODE_STORAGE_KEY);\n      return stored === 'list' ? 'list' : 'grid';\n    } catch {\n      return 'grid';\n    }\n  });\n\n  const handleSetViewMode = useCallback((mode: 'grid' | 'list') => {\n    setViewMode(mode);\n    try {\n      window.localStorage.setItem(VIEW_MODE_STORAGE_KEY, mode);\n    } catch {\n      // Ignore storage errors (e.g. private mode) - view mode still works in-session\n    }\n  }, []);\n\n  const { loading, error, dashboards, createDashboard, deleteDashboard, cloneDashboard, refetch } =\n    useDashboardOperations();\n\n  // Filter dashboards by search query\n  const filteredDashboards = dashboards.filter(\n    (d) =>\n      d.name.toLowerCase().includes(searchQuery.toLowerCase()) ||\n      d.description?.toLowerCase().includes(searchQuery.toLowerCase())\n  );\n\n  // Client-side pagination over the filtered result set\n  const totalPages = Math.max(1, Math.ceil(filteredDashboards.length / PAGE_SIZE));\n  const pageStartIndex = (currentPage - 1) * PAGE_SIZE;\n  const paginatedDashboards = filteredDashboards.slice(pageStartIndex, pageStartIndex + PAGE_SIZE);\n\n  // Reset to the first page when the search query or view changes so the\n  // visible slice always starts from the top of the (possibly new) result set.\n  useEffect(() => {\n    setCurrentPage(1);\n  }, [searchQuery, viewMode]);\n\n  // Guard against the current page exceeding the available pages (e.g. after a\n  // delete removes the last item on the final page).\n  useEffect(() => {\n    if (currentPage > totalPages) {\n      setCurrentPage(totalPages);\n    }\n  }, [currentPage, totalPages]);\n\n  const handlePrevPage = useCallback(() => {\n    setCurrentPage((prev) => Math.max(1, prev - 1));\n  }, []);\n\n  const handleNextPage = useCallback(() => {\n    setCurrentPage((prev) => Math.min(totalPages, prev + 1));\n  }, [totalPages]);\n\n  const handleGoToPage = useCallback((page: number) => {\n    setCurrentPage(page);\n  }, []);\n\n  const handleOpenCreateDialog = useCallback(() => {\n    setIsCreateDialogOpen(true);\n  }, []);\n\n  const handleCloseCreateDialog = useCallback(() => {\n    if (!isCreating) {\n      setIsCreateDialogOpen(false);\n    }\n  }, [isCreating]);\n\n  const handleCreateDashboard = useCallback(\n    async (data: { name: string; description: string; category: string; tags?: string[] }) => {\n      setIsCreating(true);\n      try {\n        const newDashboard = await createDashboard({\n          name: data.name,\n          description: data.description,\n          category: data.category,\n          tags: data.tags,\n        });\n\n        if (newDashboard) {\n          setIsCreateDialogOpen(false);\n          navigate(`/dashboards/${newDashboard.id}/builder`);\n        }\n      } catch (err) {\n        // Surface the failure instead of swallowing it: log for debugging,\n        // notify on native, and rethrow so CreateDashboardDialog displays the error.\n        console.error('Failed to create dashboard:', err);\n        if (isNative()) void nativeNotify('error');\n        throw err;\n      } finally {\n        setIsCreating(false);\n      }\n    },\n    [createDashboard, navigate]\n  );\n\n  const handleOpenDashboard = useCallback(\n    (dashboardId: string) => {\n      navigate(`/dashboards/${dashboardId}`);\n    },\n    [navigate]\n  );\n\n  const handleEditDashboard = useCallback(\n    (dashboardId: string, e: React.MouseEvent) => {\n      e.stopPropagation();\n      navigate(`/dashboards/${dashboardId}/builder`);\n    },\n    [navigate]\n  );\n\n  const handleDeleteDashboard = useCallback(\n    async (dashboardId: string, e: React.MouseEvent) => {\n      e.stopPropagation();\n      const msg = tr('bigconsole.dashboards.confirmDelete', 'Are you sure you want to delete this dashboard?');\n      const native = await nativeConfirm({\n        title: 'Delete dashboard?',\n        message: msg,\n        okButtonTitle: 'Delete',\n        cancelButtonTitle: 'Cancel',\n      });\n      const ok = native === null ? window.confirm(msg) : native;\n      if (ok) {\n        nativeImpact('medium');\n        try {\n          await deleteDashboard(dashboardId);\n          if (isNative()) void nativeNotify('success');\n        } catch (err) {\n          if (isNative()) void nativeNotify('error');\n          throw err;\n        }\n      }\n    },\n    [deleteDashboard, tr]\n  );\n\n  const handleCloneDashboard = useCallback(\n    async (dashboardId: string, sourceName: string, e: React.MouseEvent) => {\n      e.stopPropagation();\n      const defaultName = tr('bigconsole.dashboards.clone.defaultSuffix', `${sourceName} (Copy)`);\n      const name = window.prompt(\n        tr('bigconsole.dashboards.clone.namePrompt', 'Name for the cloned dashboard:'),\n        defaultName\n      );\n      if (!name || !name.trim()) return;\n      nativeImpact('medium');\n      try {\n        const cloned = await cloneDashboard(dashboardId, name.trim());\n        if (cloned) {\n          if (isNative()) void nativeNotify('success');\n          navigate(`/dashboards/${cloned.id}`);\n        }\n      } catch (err) {\n        if (isNative()) void nativeNotify('error');\n        throw err;\n      }\n    },\n    [cloneDashboard, navigate, tr]\n  );\n\n  const handleOpenImportDialog = useCallback(() => {\n    setIsImportDialogOpen(true);\n  }, []);\n\n  const handleCloseImportDialog = useCallback(() => {\n    setIsImportDialogOpen(false);\n  }, []);\n\n  const handleImportSuccess = useCallback(\n    (dashboardId: string, dashboardName: string) => {\n      refetch();\n    },\n    [refetch]\n  );\n\n  // Format relative date\n  const formatRelativeDate = (dateStr: string) => {\n    const date = new Date(dateStr);\n    const now = new Date();\n    const diffMs = now.getTime() - date.getTime();\n    const diffMins = Math.floor(diffMs / 60000);\n    const diffHours = Math.floor(diffMs / 3600000);\n    const diffDays = Math.floor(diffMs / 86400000);\n\n    if (diffMins < 1) return tr('bigconsole.dashboards.time.justNow', 'Just now');\n    if (diffMins < 60) return `${diffMins}${tr('bigconsole.dashboards.time.minutesAgoSuffix', 'm ago')}`;\n    if (diffHours < 24) return `${diffHours}${tr('bigconsole.dashboards.time.hoursAgoSuffix', 'h ago')}`;\n    if (diffDays < 7) return `${diffDays}${tr('bigconsole.dashboards.time.daysAgoSuffix', 'd ago')}`;\n\n    return new Intl.DateTimeFormat('en-US', {\n      month: 'short',\n      day: 'numeric',\n      year: date.getFullYear() !== now.getFullYear() ? 'numeric' : undefined,\n    }).format(date);\n  };\n\n  // Get widget count - uses widgetCount field from backend\n  const getWidgetCount = (dashboard: (typeof dashboards)[0]) => {\n    return dashboard.widgetCount ?? 0;\n  };\n\n  // Get page count\n  const getPageCount = (dashboard: (typeof dashboards)[0]) => {\n    return dashboard.pageCount || 0;\n  };\n\n  // Error state\n  if (error) {\n    return (\n      <div style={{ padding: 'var(--space-pagePadding)' }}>\n        <Card\n          style={{\n            borderColor: 'var(--color-status-error-border)',\n            backgroundColor: 'var(--color-status-error-bgSubtle)',\n          }}\n        >\n          <CardContent style={{ padding: 'var(--space-pagePadding)' }}>\n            <h3\n              style={{\n                fontSize: 'var(--font-size-body-sm)',\n                fontWeight: 'var(--font-weight-medium)',\n                color: 'var(--color-status-error-text)',\n              }}\n            >\n              {tr('bigconsole.dashboards.error.title', 'Error loading dashboards')}\n            </h3>\n            <p\n              style={{\n                fontSize: 'var(--font-size-body-sm)',\n                color: 'var(--color-text-secondary)',\n                marginTop: 'var(--space-controlGap)',\n              }}\n            >\n              {error.message}\n            </p>\n            <Button size=\"sm\" onClick={() => refetch()} style={{ marginTop: 'var(--space-formGap)' }}>\n              {tr('bigconsole.dashboards.error.retry', 'Retry')}\n            </Button>\n          </CardContent>\n        </Card>\n      </div>\n    );\n  }\n\n  return (\n    <div style={{ minHeight: '100vh', backgroundColor: 'var(--color-bg-canvas)' }}>\n      {/* Header Section */}\n      <div style={{ borderBottom: '1px solid var(--color-border)', backgroundColor: 'var(--color-bg-surface)' }}>\n        <div style={{ padding: 'var(--space-pagePadding)' }}>\n          <div\n            style={{\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'space-between',\n              flexWrap: 'wrap',\n              gap: 'var(--space-formGap)',\n            }}\n          >\n            <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-formGap)', minWidth: 0 }}>\n              <div\n                style={{\n                  display: 'flex',\n                  height: 'var(--size-controlHeight-lg)',\n                  width: 'var(--size-controlHeight-lg)',\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                  borderRadius: 'var(--radius-card)',\n                  backgroundColor: 'var(--color-action-primary-bg)',\n                }}\n              >\n                <LayoutDashboard\n                  style={{\n                    height: 'var(--size-icon-lg)',\n                    width: 'var(--size-icon-lg)',\n                    color: 'var(--color-action-primary-text)',\n                  }}\n                />\n              </div>\n              <div>\n                <h1\n                  style={{\n                    fontSize: 'var(--font-size-heading-h4)',\n                    fontWeight: 'var(--font-weight-bold)',\n                    margin: 0,\n                    color: 'var(--color-text-primary)',\n                  }}\n                >\n                  {tr('bigconsole.dashboards.title', 'Dashboards')}\n                </h1>\n                <p style={{ fontSize: 'var(--font-size-body-sm)', color: 'var(--color-text-secondary)', margin: 0 }}>\n                  {tr('bigconsole.dashboards.subtitle', 'Create and manage your analytics dashboards')}\n                </p>\n              </div>\n            </div>\n\n            <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-controlGap)', flexWrap: 'wrap' }}>\n              <Button variant=\"outline\" onClick={handleOpenImportDialog}>\n                <Upload\n                  style={{\n                    marginRight: 'var(--space-iconGap)',\n                    height: 'var(--size-icon-sm)',\n                    width: 'var(--size-icon-sm)',\n                  }}\n                />\n                {tr('bigconsole.dashboards.actions.import', 'Import')}\n              </Button>\n              <Button onClick={handleOpenCreateDialog}>\n                <Plus\n                  style={{\n                    marginRight: 'var(--space-iconGap)',\n                    height: 'var(--size-icon-sm)',\n                    width: 'var(--size-icon-sm)',\n                  }}\n                />\n                {tr('bigconsole.dashboards.actions.create', 'Create Dashboard')}\n              </Button>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {/* Main Content */}\n      <div style={{ padding: 'var(--space-pagePadding)' }}>\n        {/* Search Bar + View Toggle */}\n        <div\n          style={{\n            marginBottom: 'var(--space-sectionGap)',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'space-between',\n            flexWrap: 'wrap',\n            gap: 'var(--space-formGap)',\n          }}\n        >\n          <div style={{ position: 'relative', flex: 1, minWidth: 0, maxWidth: '400px' }}>\n            <Search\n              style={{\n                position: 'absolute',\n                left: 'var(--space-controlGap)',\n                top: '50%',\n                transform: 'translateY(-50%)',\n                height: 'var(--size-icon-sm)',\n                width: 'var(--size-icon-sm)',\n                color: 'var(--color-text-muted)',\n              }}\n            />\n            <Input\n              type=\"text\"\n              placeholder={tr('bigconsole.dashboards.search.placeholder', 'Search dashboards...')}\n              value={searchQuery}\n              onChange={(e) => setSearchQuery(e.target.value)}\n              style={{ paddingLeft: 'var(--size-controlHeight-md)', height: 'var(--size-controlHeight-md)' }}\n            />\n          </div>\n\n          {/* Grid / List view toggle */}\n          <div\n            style={{\n              display: 'flex',\n              alignItems: 'center',\n              gap: 'var(--space-iconGap)',\n              padding: 'var(--space-iconGap)',\n              borderRadius: 'var(--radius-button)',\n              backgroundColor: 'var(--color-bg-sunken)',\n            }}\n          >\n            <Button\n              variant={viewMode === 'grid' ? 'default' : 'ghost'}\n              size=\"sm\"\n              onClick={() => handleSetViewMode('grid')}\n              aria-label={tr('bigconsole.dashboards.view.grid', 'Grid view')}\n              aria-pressed={viewMode === 'grid'}\n              title={tr('bigconsole.dashboards.view.grid', 'Grid view')}\n              style={{\n                height: 'var(--size-controlHeight-sm)',\n                width: 'var(--size-controlHeight-sm)',\n                padding: 0,\n                borderRadius: 'var(--radius-button)',\n              }}\n            >\n              <LayoutGrid style={{ height: 'var(--size-icon-sm)', width: 'var(--size-icon-sm)' }} />\n            </Button>\n            <Button\n              variant={viewMode === 'list' ? 'default' : 'ghost'}\n              size=\"sm\"\n              onClick={() => handleSetViewMode('list')}\n              aria-label={tr('bigconsole.dashboards.view.list', 'List view')}\n              aria-pressed={viewMode === 'list'}\n              title={tr('bigconsole.dashboards.view.list', 'List view')}\n              style={{\n                height: 'var(--size-controlHeight-sm)',\n                width: 'var(--size-controlHeight-sm)',\n                padding: 0,\n                borderRadius: 'var(--radius-button)',\n              }}\n            >\n              <List style={{ height: 'var(--size-icon-sm)', width: 'var(--size-icon-sm)' }} />\n            </Button>\n          </div>\n        </div>\n\n        {/* Loading state */}\n        {loading && dashboards.length === 0 && (\n          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '80px 0' }}>\n            <div style={{ textAlign: 'center' }}>\n              <Spinner\n                style={{\n                  height: 'var(--size-icon-xl)',\n                  width: 'var(--size-icon-xl)',\n                  margin: '0 auto var(--space-formGap)',\n                }}\n              />\n              <p style={{ fontSize: 'var(--font-size-body-sm)', color: 'var(--color-text-muted)' }}>\n                {tr('bigconsole.dashboards.loading', 'Loading dashboards...')}\n              </p>\n            </div>\n          </div>\n        )}\n\n        {/* Dashboard Grid */}\n        {!loading && viewMode === 'grid' && filteredDashboards.length > 0 && (\n          <div\n            style={{\n              display: 'grid',\n              gridTemplateColumns: 'repeat(auto-fill, minmax(min(320px, 100%), 1fr))',\n              gap: 'var(--space-formGap)',\n            }}\n          >\n            {paginatedDashboards.map((dashboard) => (\n              <Card\n                key={dashboard.id}\n                onClick={() => handleOpenDashboard(dashboard.id)}\n                style={{\n                  cursor: 'pointer',\n                  transition: 'all 0.2s ease',\n                }}\n                className=\"hover:shadow-md hover:border-primary/50\"\n              >\n                <CardContent style={{ padding: 'var(--space-cardPadding)' }}>\n                  {/* Card Header with Icon and Name */}\n                  <div\n                    style={{\n                      display: 'flex',\n                      alignItems: 'center',\n                      gap: 'var(--space-controlGap)',\n                      marginBottom: 'var(--space-formGap)',\n                    }}\n                  >\n                    <div\n                      style={{\n                        display: 'flex',\n                        height: 'var(--size-controlHeight-lg)',\n                        width: 'var(--size-controlHeight-lg)',\n                        flexShrink: 0,\n                        alignItems: 'center',\n                        justifyContent: 'center',\n                        borderRadius: 'var(--radius-button)',\n                        backgroundColor: 'var(--color-action-primary-bg)',\n                      }}\n                    >\n                      <LayoutDashboard\n                        style={{\n                          height: 'var(--size-icon-md)',\n                          width: 'var(--size-icon-md)',\n                          color: 'var(--color-action-primary-text)',\n                        }}\n                      />\n                    </div>\n                    <div style={{ flex: 1, minWidth: 0 }}>\n                      <h3\n                        style={{\n                          fontWeight: 'var(--font-weight-bold)',\n                          fontSize: 'var(--font-size-body-md)',\n                          margin: 0,\n                          color: 'var(--color-text-primary)',\n                          overflow: 'hidden',\n                          textOverflow: 'ellipsis',\n                          whiteSpace: 'nowrap',\n                        }}\n                      >\n                        {dashboard.name}\n                      </h3>\n                      {dashboard.category && (\n                        <Badge\n                          variant=\"secondary\"\n                          style={{\n                            marginTop: 'var(--space-controlGap)',\n                            fontSize: '10px',\n                            fontWeight: 'var(--font-weight-semibold)',\n                            textTransform: 'uppercase',\n                          }}\n                        >\n                          {dashboard.category}\n                        </Badge>\n                      )}\n                    </div>\n                  </div>\n\n                  {/* Description */}\n                  <p\n                    style={{\n                      fontSize: 'var(--font-size-body-sm)',\n                      lineHeight: 'var(--font-lineHeight-normal)',\n                      color: 'var(--color-text-secondary)',\n                      margin: '0 0 var(--space-formGap) 0',\n                      minHeight: '40px',\n                      display: '-webkit-box',\n                      WebkitLineClamp: 2,\n                      WebkitBoxOrient: 'vertical',\n                      overflow: 'hidden',\n                    }}\n                  >\n                    {dashboard.description || tr('bigconsole.dashboards.card.noDescription', 'No description provided')}\n                  </p>\n\n                  {/* Stats Row */}\n                  <div\n                    style={{\n                      display: 'flex',\n                      alignItems: 'center',\n                      gap: 'var(--space-formGap)',\n                      marginBottom: 'var(--space-formGap)',\n                      padding: 'var(--space-controlGap) var(--space-cardPadding)',\n                      backgroundColor: 'var(--color-bg-sunken)',\n                      borderRadius: 'var(--radius-button)',\n                    }}\n                  >\n                    <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-iconGap)' }}>\n                      <Layers\n                        style={{\n                          height: 'var(--size-icon-sm)',\n                          width: 'var(--size-icon-sm)',\n                          color: 'var(--color-action-primary-bg)',\n                        }}\n                      />\n                      <span\n                        style={{\n                          fontSize: 'var(--font-size-body-sm)',\n                          fontWeight: 'var(--font-weight-semibold)',\n                          color: 'var(--color-text-primary)',\n                        }}\n                      >\n                        {getPageCount(dashboard)}\n                      </span>\n                      <span style={{ fontSize: 'var(--font-size-body-sm)', color: 'var(--color-text-muted)' }}>\n                        {tr('bigconsole.dashboards.card.pages', 'pages')}\n                      </span>\n                    </div>\n                    <div\n                      style={{ width: '1px', height: 'var(--size-icon-sm)', backgroundColor: 'var(--color-border)' }}\n                    />\n                    <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-iconGap)' }}>\n                      <FileText\n                        style={{\n                          height: 'var(--size-icon-sm)',\n                          width: 'var(--size-icon-sm)',\n                          color: 'var(--color-action-primary-bg)',\n                        }}\n                      />\n                      <span\n                        style={{\n                          fontSize: 'var(--font-size-body-sm)',\n                          fontWeight: 'var(--font-weight-semibold)',\n                          color: 'var(--color-text-primary)',\n                        }}\n                      >\n                        {getWidgetCount(dashboard)}\n                      </span>\n                      <span style={{ fontSize: 'var(--font-size-body-sm)', color: 'var(--color-text-muted)' }}>\n                        {tr('bigconsole.dashboards.card.widgets', 'widgets')}\n                      </span>\n                    </div>\n                  </div>\n\n                  {/* Footer with Date and Actions */}\n                  <div\n                    style={{\n                      display: 'flex',\n                      alignItems: 'center',\n                      justifyContent: 'space-between',\n                      paddingTop: 'var(--space-controlGap)',\n                      borderTop: '1px solid var(--color-border)',\n                    }}\n                  >\n                    <div\n                      style={{\n                        display: 'flex',\n                        alignItems: 'center',\n                        gap: 'var(--space-iconGap)',\n                      }}\n                    >\n                      <Calendar\n                        style={{\n                          height: 'var(--size-icon-sm)',\n                          width: 'var(--size-icon-sm)',\n                          color: 'var(--color-text-muted)',\n                        }}\n                      />\n                      <span\n                        style={{\n                          fontSize: 'var(--font-size-body-sm)',\n                          fontWeight: 'var(--font-weight-medium)',\n                          color: 'var(--color-text-muted)',\n                        }}\n                      >\n                        {formatRelativeDate(dashboard.updatedAt)}\n                      </span>\n                    </div>\n\n                    <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-controlGap)' }}>\n                      <Button\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        onClick={(e) => handleEditDashboard(dashboard.id, e)}\n                        style={{\n                          height: 'var(--size-controlHeight-sm)',\n                          width: 'var(--size-controlHeight-sm)',\n                          padding: 0,\n                          borderRadius: 'var(--radius-button)',\n                        }}\n                        title={tr('bigconsole.dashboards.actions.editTitle', 'Edit Dashboard')}\n                      >\n                        <Pencil style={{ height: 'var(--size-icon-sm)', width: 'var(--size-icon-sm)' }} />\n                      </Button>\n                      <Button\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        onClick={(e) => handleCloneDashboard(dashboard.id, dashboard.name, e)}\n                        style={{\n                          height: 'var(--size-controlHeight-sm)',\n                          width: 'var(--size-controlHeight-sm)',\n                          padding: 0,\n                          borderRadius: 'var(--radius-button)',\n                        }}\n                        title={tr('bigconsole.dashboards.actions.cloneTitle', 'Clone Dashboard')}\n                      >\n                        <Copy style={{ height: 'var(--size-icon-sm)', width: 'var(--size-icon-sm)' }} />\n                      </Button>\n                      <Button\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        onClick={(e) => handleDeleteDashboard(dashboard.id, e)}\n                        style={{\n                          height: 'var(--size-controlHeight-sm)',\n                          width: 'var(--size-controlHeight-sm)',\n                          padding: 0,\n                          borderRadius: 'var(--radius-button)',\n                        }}\n                        className=\"hover:text-status-error-text hover:bg-status-error-bg/10\"\n                        title={tr('bigconsole.dashboards.actions.deleteTitle', 'Delete Dashboard')}\n                      >\n                        <Trash2 style={{ height: 'var(--size-icon-sm)', width: 'var(--size-icon-sm)' }} />\n                      </Button>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n            ))}\n          </div>\n        )}\n\n        {/* Dashboard List */}\n        {!loading && viewMode === 'list' && filteredDashboards.length > 0 && (\n          <div\n            style={{\n              display: 'flex',\n              flexDirection: 'column',\n              gap: 'var(--space-controlGap)',\n            }}\n          >\n            {paginatedDashboards.map((dashboard) => (\n              <Card\n                key={dashboard.id}\n                onClick={() => handleOpenDashboard(dashboard.id)}\n                style={{\n                  cursor: 'pointer',\n                  transition: 'all 0.2s ease',\n                }}\n                className=\"hover:shadow-md hover:border-primary/50\"\n              >\n                <CardContent style={{ padding: 'var(--space-cardPadding)' }}>\n                  <div\n                    style={{\n                      display: 'flex',\n                      alignItems: 'center',\n                      gap: 'var(--space-formGap)',\n                      flexWrap: 'wrap',\n                    }}\n                  >\n                    {/* Icon */}\n                    <div\n                      style={{\n                        display: 'flex',\n                        height: 'var(--size-controlHeight-lg)',\n                        width: 'var(--size-controlHeight-lg)',\n                        flexShrink: 0,\n                        alignItems: 'center',\n                        justifyContent: 'center',\n                        borderRadius: 'var(--radius-button)',\n                        backgroundColor: 'var(--color-action-primary-bg)',\n                      }}\n                    >\n                      <LayoutDashboard\n                        style={{\n                          height: 'var(--size-icon-md)',\n                          width: 'var(--size-icon-md)',\n                          color: 'var(--color-action-primary-text)',\n                        }}\n                      />\n                    </div>\n\n                    {/* Name + Description */}\n                    <div style={{ flex: 1, minWidth: '180px' }}>\n                      <div\n                        style={{\n                          display: 'flex',\n                          alignItems: 'center',\n                          gap: 'var(--space-controlGap)',\n                          flexWrap: 'wrap',\n                        }}\n                      >\n                        <h3\n                          style={{\n                            fontWeight: 'var(--font-weight-bold)',\n                            fontSize: 'var(--font-size-body-md)',\n                            margin: 0,\n                            color: 'var(--color-text-primary)',\n                            overflow: 'hidden',\n                            textOverflow: 'ellipsis',\n                            whiteSpace: 'nowrap',\n                            maxWidth: '100%',\n                          }}\n                        >\n                          {dashboard.name}\n                        </h3>\n                        {dashboard.category && (\n                          <Badge\n                            variant=\"secondary\"\n                            style={{\n                              fontSize: '10px',\n                              fontWeight: 'var(--font-weight-semibold)',\n                              textTransform: 'uppercase',\n                            }}\n                          >\n                            {dashboard.category}\n                          </Badge>\n                        )}\n                      </div>\n                      <p\n                        style={{\n                          fontSize: 'var(--font-size-body-sm)',\n                          lineHeight: 'var(--font-lineHeight-normal)',\n                          color: 'var(--color-text-secondary)',\n                          margin: 'var(--space-controlGap) 0 0 0',\n                          overflow: 'hidden',\n                          textOverflow: 'ellipsis',\n                          whiteSpace: 'nowrap',\n                        }}\n                      >\n                        {dashboard.description ||\n                          tr('bigconsole.dashboards.card.noDescription', 'No description provided')}\n                      </p>\n                    </div>\n\n                    {/* Stats + Date */}\n                    <div\n                      style={{\n                        display: 'flex',\n                        alignItems: 'center',\n                        gap: 'var(--space-formGap)',\n                        flexWrap: 'wrap',\n                      }}\n                    >\n                      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-iconGap)' }}>\n                        <Layers\n                          style={{\n                            height: 'var(--size-icon-sm)',\n                            width: 'var(--size-icon-sm)',\n                            color: 'var(--color-action-primary-bg)',\n                          }}\n                        />\n                        <span\n                          style={{\n                            fontSize: 'var(--font-size-body-sm)',\n                            fontWeight: 'var(--font-weight-semibold)',\n                            color: 'var(--color-text-primary)',\n                          }}\n                        >\n                          {getPageCount(dashboard)}\n                        </span>\n                        <span style={{ fontSize: 'var(--font-size-body-sm)', color: 'var(--color-text-muted)' }}>\n                          {tr('bigconsole.dashboards.card.pages', 'pages')}\n                        </span>\n                      </div>\n                      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-iconGap)' }}>\n                        <FileText\n                          style={{\n                            height: 'var(--size-icon-sm)',\n                            width: 'var(--size-icon-sm)',\n                            color: 'var(--color-action-primary-bg)',\n                          }}\n                        />\n                        <span\n                          style={{\n                            fontSize: 'var(--font-size-body-sm)',\n                            fontWeight: 'var(--font-weight-semibold)',\n                            color: 'var(--color-text-primary)',\n                          }}\n                        >\n                          {getWidgetCount(dashboard)}\n                        </span>\n                        <span style={{ fontSize: 'var(--font-size-body-sm)', color: 'var(--color-text-muted)' }}>\n                          {tr('bigconsole.dashboards.card.widgets', 'widgets')}\n                        </span>\n                      </div>\n                      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-iconGap)' }}>\n                        <Calendar\n                          style={{\n                            height: 'var(--size-icon-sm)',\n                            width: 'var(--size-icon-sm)',\n                            color: 'var(--color-text-muted)',\n                          }}\n                        />\n                        <span\n                          style={{\n                            fontSize: 'var(--font-size-body-sm)',\n                            fontWeight: 'var(--font-weight-medium)',\n                            color: 'var(--color-text-muted)',\n                          }}\n                        >\n                          {formatRelativeDate(dashboard.updatedAt)}\n                        </span>\n                      </div>\n                    </div>\n\n                    {/* Actions */}\n                    <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-controlGap)' }}>\n                      <Button\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        onClick={(e) => handleEditDashboard(dashboard.id, e)}\n                        style={{\n                          height: 'var(--size-controlHeight-sm)',\n                          width: 'var(--size-controlHeight-sm)',\n                          padding: 0,\n                          borderRadius: 'var(--radius-button)',\n                        }}\n                        title={tr('bigconsole.dashboards.actions.editTitle', 'Edit Dashboard')}\n                      >\n                        <Pencil style={{ height: 'var(--size-icon-sm)', width: 'var(--size-icon-sm)' }} />\n                      </Button>\n                      <Button\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        onClick={(e) => handleCloneDashboard(dashboard.id, dashboard.name, e)}\n                        style={{\n                          height: 'var(--size-controlHeight-sm)',\n                          width: 'var(--size-controlHeight-sm)',\n                          padding: 0,\n                          borderRadius: 'var(--radius-button)',\n                        }}\n                        title={tr('bigconsole.dashboards.actions.cloneTitle', 'Clone Dashboard')}\n                      >\n                        <Copy style={{ height: 'var(--size-icon-sm)', width: 'var(--size-icon-sm)' }} />\n                      </Button>\n                      <Button\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        onClick={(e) => handleDeleteDashboard(dashboard.id, e)}\n                        style={{\n                          height: 'var(--size-controlHeight-sm)',\n                          width: 'var(--size-controlHeight-sm)',\n                          padding: 0,\n                          borderRadius: 'var(--radius-button)',\n                        }}\n                        className=\"hover:text-status-error-text hover:bg-status-error-bg/10\"\n                        title={tr('bigconsole.dashboards.actions.deleteTitle', 'Delete Dashboard')}\n                      >\n                        <Trash2 style={{ height: 'var(--size-icon-sm)', width: 'var(--size-icon-sm)' }} />\n                      </Button>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n            ))}\n          </div>\n        )}\n\n        {/* Pagination controls */}\n        {!loading && filteredDashboards.length > PAGE_SIZE && (\n          <div\n            style={{\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n              gap: 'var(--space-controlGap)',\n              flexWrap: 'wrap',\n              marginTop: 'var(--space-sectionGap)',\n            }}\n          >\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={handlePrevPage}\n              disabled={currentPage <= 1}\n              aria-label={tr('bigconsole.dashboards.pagination.previous', 'Previous')}\n            >\n              <ChevronLeft\n                style={{\n                  marginRight: 'var(--space-iconGap)',\n                  height: 'var(--size-icon-sm)',\n                  width: 'var(--size-icon-sm)',\n                }}\n              />\n              {tr('bigconsole.dashboards.pagination.previous', 'Previous')}\n            </Button>\n\n            <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-iconGap)', flexWrap: 'wrap' }}>\n              {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (\n                <Button\n                  key={page}\n                  variant={page === currentPage ? 'default' : 'ghost'}\n                  size=\"sm\"\n                  onClick={() => handleGoToPage(page)}\n                  aria-current={page === currentPage ? 'page' : undefined}\n                  style={{\n                    minWidth: 'var(--size-controlHeight-sm)',\n                    height: 'var(--size-controlHeight-sm)',\n                    padding: '0 var(--space-controlGap)',\n                    borderRadius: 'var(--radius-button)',\n                  }}\n                >\n                  {page}\n                </Button>\n              ))}\n            </div>\n\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={handleNextPage}\n              disabled={currentPage >= totalPages}\n              aria-label={tr('bigconsole.dashboards.pagination.next', 'Next')}\n            >\n              {tr('bigconsole.dashboards.pagination.next', 'Next')}\n              <ChevronRight\n                style={{\n                  marginLeft: 'var(--space-iconGap)',\n                  height: 'var(--size-icon-sm)',\n                  width: 'var(--size-icon-sm)',\n                }}\n              />\n            </Button>\n\n            <span\n              style={{\n                fontSize: 'var(--font-size-body-sm)',\n                color: 'var(--color-text-muted)',\n                marginLeft: 'var(--space-controlGap)',\n              }}\n            >\n              {tr('bigconsole.dashboards.pagination.pageOf', `Page ${currentPage} of ${totalPages}`)}\n            </span>\n          </div>\n        )}\n\n        {/* Empty state */}\n        {!loading && filteredDashboards.length === 0 && (\n          <Card className=\"border-dashed\">\n            <CardContent\n              style={{\n                display: 'flex',\n                flexDirection: 'column',\n                alignItems: 'center',\n                justifyContent: 'center',\n                padding: '64px var(--space-pagePadding)',\n              }}\n            >\n              <div\n                style={{\n                  display: 'flex',\n                  height: '80px',\n                  width: '80px',\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                  borderRadius: '50%',\n                  backgroundColor: 'var(--color-bg-sunken)',\n                  marginBottom: 'var(--space-sectionGap)',\n                }}\n              >\n                <FolderOpen\n                  style={{\n                    height: 'var(--size-icon-xl)',\n                    width: 'var(--size-icon-xl)',\n                    color: 'var(--color-text-muted)',\n                  }}\n                />\n              </div>\n              <h3\n                style={{\n                  fontSize: 'var(--font-size-heading-h4)',\n                  fontWeight: 'var(--font-weight-semibold)',\n                  marginBottom: 'var(--space-controlGap)',\n                }}\n              >\n                {searchQuery\n                  ? tr('bigconsole.dashboards.empty.filteredTitle', 'No dashboards found')\n                  : tr('bigconsole.dashboards.empty.title', 'No dashboards yet')}\n              </h3>\n              <p\n                style={{\n                  fontSize: 'var(--font-size-body-sm)',\n                  color: 'var(--color-text-muted)',\n                  marginBottom: 'var(--space-sectionGap)',\n                  textAlign: 'center',\n                  maxWidth: '360px',\n                }}\n              >\n                {searchQuery\n                  ? tr('bigconsole.dashboards.empty.filteredDescription', 'Try adjusting your search terms')\n                  : tr(\n                      'bigconsole.dashboards.empty.description',\n                      'Get started by creating your first dashboard to visualize your data'\n                    )}\n              </p>\n              {!searchQuery && (\n                <div\n                  style={{\n                    display: 'flex',\n                    gap: 'var(--space-controlGap)',\n                    flexWrap: 'wrap',\n                    justifyContent: 'center',\n                  }}\n                >\n                  <Button variant=\"outline\" onClick={handleOpenImportDialog}>\n                    <Upload\n                      style={{\n                        marginRight: 'var(--space-iconGap)',\n                        height: 'var(--size-icon-sm)',\n                        width: 'var(--size-icon-sm)',\n                      }}\n                    />\n                    {tr('bigconsole.dashboards.actions.importDashboard', 'Import Dashboard')}\n                  </Button>\n                  <Button onClick={handleOpenCreateDialog}>\n                    <Plus\n                      style={{\n                        marginRight: 'var(--space-iconGap)',\n                        height: 'var(--size-icon-sm)',\n                        width: 'var(--size-icon-sm)',\n                      }}\n                    />\n                    {tr('bigconsole.dashboards.actions.create', 'Create Dashboard')}\n                  </Button>\n                </div>\n              )}\n            </CardContent>\n          </Card>\n        )}\n      </div>\n\n      {/* Create Dashboard Dialog */}\n      <CreateDashboardDialog\n        isOpen={isCreateDialogOpen}\n        isCreating={isCreating}\n        onClose={handleCloseCreateDialog}\n        onCreate={handleCreateDashboard}\n      />\n\n      {/* Import Dashboard Dialog */}\n      <ImportDashboardDialog\n        isOpen={isImportDialogOpen}\n        onClose={handleCloseImportDialog}\n        onSuccess={handleImportSuccess}\n      />\n    </div>\n  );\n});\n\nexport default DashboardsPage;\n"],"mappings":"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"}

package/dist/bigconsole/pages/DataSinkBuilderPage.js

@@ -480,10 +480,10 @@ var E = r(function() {
 								children: U
 							})
 						}) : V && V.length > 0 ? /* @__PURE__ */ h("pre", {
-							className: "p-4 bg-bg-muted rounded-md overflow-auto max-h-[300px] text-xs font-mono",
+							className: "p-4 bg-bg-sunken rounded-md overflow-auto max-h-[300px] text-xs font-mono",
 							children: JSON.stringify(V, null, 2)
 						}) : /* @__PURE__ */ h("div", {
-							className: "p-4 bg-bg-muted rounded-md text-center",
+							className: "p-4 bg-bg-sunken rounded-md text-center",
 							children: /* @__PURE__ */ h("p", {
 								className: "text-sm text-text-secondary",
 								children: "No data available yet. Connect a workflow to push data."
@@ -506,7 +506,7 @@ var E = r(function() {
 					]
 				}),
 				!D && /* @__PURE__ */ g("div", {
-					className: "mt-spacing-lg p-4 bg-bg-muted rounded-lg border border-border-default",
+					className: "mt-spacing-lg p-4 bg-bg-sunken rounded-lg border border-border-default",
 					children: [/* @__PURE__ */ h("h3", {
 						className: "text-sm font-medium text-text-primary mb-2",
 						children: "What's Next?"