@object-ui/plugin-dashboard 3.3.0 → 3.3.2

package/src/DashboardRenderer.tsx

@@ -1,479 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import type { DashboardSchema, DashboardWidgetSchema } from '@object-ui/types';
-import { SchemaRenderer } from '@object-ui/react';
-import { cn, Card, CardHeader, CardTitle, CardContent, Button } from '@object-ui/components';
-import { forwardRef, useState, useEffect, useCallback, useRef } from 'react';
-import { RefreshCw } from 'lucide-react';
-import { isObjectProvider } from './utils';
-
-/** Resolve an I18nLabel (string or {key, defaultValue}) to a plain string. */
-function resolveLabel(label: string | { key?: string; defaultValue?: string } | undefined): string | undefined {
-  if (label === undefined || label === null) return undefined;
-  if (typeof label === 'string') return label;
-  return label.defaultValue || label.key;
-}
-
-// Color palette for charts
-const CHART_COLORS = [
-  'hsl(var(--chart-1))',
-  'hsl(var(--chart-2))',
-  'hsl(var(--chart-3))',
-  'hsl(var(--chart-4))',
-  'hsl(var(--chart-5))',
-];
-
-export interface DashboardRendererProps {
-  schema: DashboardSchema;
-  className?: string;
-  /** Callback invoked when dashboard refresh is triggered (manual or auto) */
-  onRefresh?: () => void;
-  /** Total record count to display */
-  recordCount?: number;
-  /** User actions configuration */
-  userActions?: { sort?: boolean; search?: boolean; filter?: boolean };
-  /** Enable design mode — shows selection affordances on widgets */
-  designMode?: boolean;
-  /** Currently selected widget ID (controlled) */
-  selectedWidgetId?: string | null;
-  /** Callback when a widget is clicked in design mode */
-  onWidgetClick?: (widgetId: string | null) => void;
-  [key: string]: any;
-}
-
-export const DashboardRenderer = forwardRef<HTMLDivElement, DashboardRendererProps>(
-  ({ schema, className, dataSource, onRefresh, recordCount, userActions, designMode, selectedWidgetId, onWidgetClick, ...props }, ref) => {
-    const columns = schema.columns || 4; // Default to 4 columns for better density
-    const gap = schema.gap || 4;
-    const [refreshing, setRefreshing] = useState(false);
-    const [isMobile, setIsMobile] = useState(false);
-    const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
-
-    useEffect(() => {
-      const checkMobile = () => setIsMobile(window.innerWidth < 768);
-      checkMobile();
-      window.addEventListener('resize', checkMobile);
-      return () => window.removeEventListener('resize', checkMobile);
-    }, []);
-
-    const handleRefresh = useCallback(() => {
-      if (!onRefresh) return;
-      setRefreshing(true);
-      onRefresh();
-      // Reset refreshing indicator after a short delay
-      setTimeout(() => setRefreshing(false), 600);
-    }, [onRefresh]);
-
-    // Auto-refresh interval
-    useEffect(() => {
-      if (!schema.refreshInterval || schema.refreshInterval <= 0 || !onRefresh) return;
-      intervalRef.current = setInterval(handleRefresh, schema.refreshInterval * 1000);
-      return () => {
-        if (intervalRef.current) clearInterval(intervalRef.current);
-      };
-    }, [schema.refreshInterval, onRefresh, handleRefresh]);
-
-    const handleWidgetClick = useCallback((e: React.MouseEvent, widgetId: string | undefined) => {
-      if (!designMode || !onWidgetClick || !widgetId) return;
-      e.stopPropagation();
-      onWidgetClick(widgetId);
-    }, [designMode, onWidgetClick]);
-
-    const handleWidgetKeyDown = useCallback((e: React.KeyboardEvent, widgetId: string | undefined, index: number) => {
-      if (!designMode || !onWidgetClick) return;
-      const widgets = schema.widgets || [];
-      if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault();
-        onWidgetClick(widgetId ?? null);
-      } else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
-        e.preventDefault();
-        const next = index + 1 < widgets.length ? widgets[index + 1] : null;
-        if (next?.id) onWidgetClick(next.id);
-      } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
-        e.preventDefault();
-        const prev = index - 1 >= 0 ? widgets[index - 1] : null;
-        if (prev?.id) onWidgetClick(prev.id);
-      } else if (e.key === 'Escape') {
-        e.preventDefault();
-        onWidgetClick(null);
-      }
-    }, [designMode, onWidgetClick, schema.widgets]);
-
-    const handleBackgroundClick = useCallback((e: React.MouseEvent) => {
-      if (!designMode || !onWidgetClick) return;
-      if (e.target === e.currentTarget) {
-        onWidgetClick(null);
-      }
-    }, [designMode, onWidgetClick]);
-
-    const renderWidget = (widget: DashboardWidgetSchema, index: number, forceMobileFullWidth?: boolean) => {
-        // Clamp widget span to grid columns to prevent overflow
-        const clampedLayout = widget.layout
-          ? { ...widget.layout, w: Math.min(widget.layout.w, columns) }
-          : undefined;
-
-        const getComponentSchema = () => {
-            if (widget.component) return widget.component;
-
-            // Handle Shorthand Registry Mappings
-            const widgetType = widget.type;
-            const options = (widget.options || {}) as Record<string, any>;
-
-            // Metric widgets with object binding — delegate to ObjectMetricWidget
-            // for async data loading with proper error/loading states.
-            // Static metric options (label, value, trend, icon) are passed as
-            // fallback values that render only when no dataSource is available.
-            if (widgetType === 'metric' && widget.object) {
-                const widgetData = options.data;
-                const aggregate = isObjectProvider(widgetData) && widgetData.aggregate
-                    ? {
-                        field: widget.valueField || widgetData.aggregate.field,
-                        function: widget.aggregate || widgetData.aggregate.function,
-                        // Prefer explicit categoryField or aggregate.groupBy; otherwise, default to a single bucket.
-                        groupBy: widget.categoryField ?? widgetData.aggregate.groupBy ?? '_all',
-                    }
-                    : widget.aggregate ? {
-                        field: widget.valueField || 'value',
-                        function: widget.aggregate,
-                        // Default to a single group unless the user explicitly configures a categoryField.
-                        groupBy: widget.categoryField || '_all',
-                    } : undefined;
-
-                return {
-                    type: 'object-metric',
-                    objectName: widget.object || (isObjectProvider(widgetData) ? widgetData.object : undefined),
-                    aggregate,
-                    filter: (isObjectProvider(widgetData) ? widgetData.filter : undefined) || widget.filter,
-                    label: options.label || resolveLabel(widget.title) || '',
-                    fallbackValue: options.value,
-                    trend: options.trend,
-                    icon: options.icon,
-                    description: options.description,
-                };
-            }
-
-            if (widgetType === 'bar' || widgetType === 'line' || widgetType === 'area' || widgetType === 'pie' || widgetType === 'donut' || widgetType === 'scatter') {
-                // Support data at widget level or nested inside options
-                const widgetData = (widget as any).data || options.data;
-                // Widget-level fields (from config panel) override options-level fields
-                const xAxisKey = widget.categoryField || options.xField || 'name';
-                const yField = widget.valueField || options.yField || 'value';
-
-                // provider: 'object' — delegate to ObjectChart for async data loading
-                if (isObjectProvider(widgetData)) {
-                    // Merge widget-level fields with data provider config.
-                    // Widget-level fields take precedence so that config panel
-                    // edits are immediately reflected in the live preview.
-                    const providerAgg = widgetData.aggregate;
-                    const effectiveAggregate = providerAgg ? {
-                        field: widget.valueField || providerAgg.field,
-                        function: widget.aggregate || providerAgg.function,
-                        groupBy: widget.categoryField || providerAgg.groupBy,
-                    } : undefined;
-                    const effectiveYField = effectiveAggregate?.field || yField;
-                    return {
-                        type: 'object-chart',
-                        chartType: widgetType,
-                        objectName: widget.object || widgetData.object,
-                        aggregate: effectiveAggregate,
-                        xAxisKey: xAxisKey,
-                        series: [{ dataKey: effectiveYField }],
-                        colors: CHART_COLORS,
-                        className: "h-[200px] sm:h-[250px] md:h-[300px]"
-                    };
-                }
-
-                // No explicit data provider but widget has object binding
-                // (e.g. newly created widget via config panel) — build object-chart
-                if (!widgetData && widget.object) {
-                    const aggregate = widget.aggregate ? {
-                        field: widget.valueField || 'value',
-                        function: widget.aggregate,
-                        groupBy: widget.categoryField || 'name',
-                    } : undefined;
-                    return {
-                        type: 'object-chart',
-                        chartType: widgetType,
-                        objectName: widget.object,
-                        aggregate,
-                        xAxisKey: xAxisKey,
-                        series: [{ dataKey: widget.valueField || 'value' }],
-                        colors: CHART_COLORS,
-                        className: "h-[200px] sm:h-[250px] md:h-[300px]"
-                    };
-                }
-
-                const dataItems = Array.isArray(widgetData) ? widgetData : widgetData?.items || [];
-                
-                return {
-                    type: 'chart',
-                    chartType: widgetType,
-                    data: dataItems,
-                    xAxisKey: xAxisKey,
-                    series: [{ dataKey: yField }],
-                    colors: CHART_COLORS,
-                    className: "h-[200px] sm:h-[250px] md:h-[300px]"
-                };
-            }
-
-            if (widgetType === 'table') {
-                // Support data at widget level or nested inside options
-                const widgetData = (widget as any).data || options.data;
-
-                // provider: 'object' — use ObjectDataTable for async data loading
-                if (isObjectProvider(widgetData)) {
-                    const { data: _data, ...restOptions } = options;
-                    return {
-                        type: 'object-data-table',
-                        ...restOptions,
-                        objectName: widget.object || widgetData.object,
-                        dataProvider: widgetData,
-                        filter: widgetData.filter || widget.filter,
-                        searchable: widget.searchable ?? false,
-                        pagination: widget.pagination ?? false,
-                        className: "border-0"
-                    };
-                }
-
-                // No explicit data provider but widget has object binding
-                if (!widgetData && widget.object) {
-                    return {
-                        type: 'object-data-table',
-                        ...options,
-                        objectName: widget.object,
-                        filter: widget.filter,
-                        searchable: widget.searchable ?? false,
-                        pagination: widget.pagination ?? false,
-                        className: "border-0"
-                    };
-                }
-
-                return {
-                    type: 'data-table',
-                    ...options,
-                    data: widgetData?.items || [],
-                    searchable: false,
-                    pagination: false,
-                    className: "border-0"
-                };
-            }
-
-            if (widgetType === 'pivot') {
-                const widgetData = (widget as any).data || options.data;
-
-                // provider: 'object' — use ObjectPivotTable for async data loading
-                if (isObjectProvider(widgetData)) {
-                    const { data: _data, ...restOptions } = options;
-                    return {
-                        type: 'object-pivot',
-                        ...restOptions,
-                        objectName: widget.object || widgetData.object,
-                        dataProvider: widgetData,
-                        filter: widgetData.filter || widget.filter,
-                    };
-                }
-
-                // No explicit data provider but widget has object binding
-                if (!widgetData && widget.object) {
-                    return {
-                        type: 'object-pivot',
-                        ...options,
-                        objectName: widget.object,
-                        filter: widget.filter,
-                    };
-                }
-
-                return {
-                    type: 'pivot',
-                    ...options,
-                    data: Array.isArray(widgetData) ? widgetData : widgetData?.items || [],
-                };
-            }
-
-            return {
-                ...widget,
-                ...options
-            };
-        };
-        
-        const componentSchema = getComponentSchema();
-        const isSelfContained = widget.type === 'metric';
-        const resolvedTitle = resolveLabel(widget.title);
-        const resolvedDescription = resolveLabel(widget.description);
-        const widgetKey = widget.id || resolvedTitle || `widget-${index}`;
-        const isSelected = designMode && selectedWidgetId === widget.id;
-
-        const designModeProps = designMode ? {
-            'data-testid': `dashboard-preview-widget-${widget.id}`,
-            'data-widget-id': widget.id,
-            role: 'button' as const,
-            tabIndex: 0,
-            'aria-selected': isSelected,
-            'aria-label': `Widget: ${resolvedTitle || `Widget ${index + 1}`}`,
-            onClick: (e: React.MouseEvent) => handleWidgetClick(e, widget.id),
-            onKeyDown: (e: React.KeyboardEvent) => handleWidgetKeyDown(e, widget.id, index),
-        } : {};
-
-        const selectionClasses = designMode
-          ? cn(
-              "cursor-pointer rounded-lg transition-all outline-none",
-              "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-              isSelected
-                ? "ring-2 ring-primary shadow-md bg-primary/5 dark:bg-primary/10"
-                : "hover:ring-2 hover:ring-primary/40 hover:shadow-sm"
-            )
-          : undefined;
-
-        if (isSelfContained) {
-            return (
-                <div 
-                    key={widgetKey}
-                    className={cn("h-full w-full", designMode && "relative", selectionClasses)}
-                    style={!isMobile && clampedLayout ? {
-                        gridColumn: `span ${clampedLayout.w}`,
-                        gridRow: `span ${clampedLayout.h}`
-                    }: undefined}
-                    {...designModeProps}
-                >
-                     <SchemaRenderer schema={componentSchema} className={cn("h-full w-full", designMode && "pointer-events-none")} />
-                     {designMode && <div className="absolute inset-0 z-10" aria-hidden="true" data-testid="widget-click-overlay" />}
-                </div>
-            );
-        }
-
-        return (
-            <Card 
-                key={widgetKey}
-                className={cn(
-                    "overflow-hidden border-border/50 shadow-sm transition-all hover:shadow-md",
-                    "bg-card/50 backdrop-blur-sm",
-                    forceMobileFullWidth && "w-full",
-                    designMode && "relative",
-                    selectionClasses
-                )}
-                style={!isMobile && clampedLayout ? {
-                    gridColumn: `span ${clampedLayout.w}`,
-                    gridRow: `span ${clampedLayout.h}`
-                }: undefined}
-                {...designModeProps}
-            >
-                {resolvedTitle && (
-                    <CardHeader className="pb-2 border-b border-border/40 bg-muted/20 px-3 sm:px-6">
-                        <CardTitle className="text-sm sm:text-base font-medium tracking-tight truncate" title={resolvedTitle}>
-                            {resolvedTitle}
-                        </CardTitle>
-                        {resolvedDescription && (
-                            <p className="text-xs text-muted-foreground mt-0.5 line-clamp-2">{resolvedDescription}</p>
-                        )}
-                    </CardHeader>
-                )}
-                <CardContent className="p-0">
-                    <div className={cn("h-full w-full", "p-3 sm:p-4 md:p-6", designMode && "pointer-events-none")}>
-                        <SchemaRenderer schema={componentSchema} />
-                    </div>
-                </CardContent>
-                {designMode && <div className="absolute inset-0 z-10" aria-hidden="true" data-testid="widget-click-overlay" />}
-            </Card>
-        );
-    };
-
-    const headerSection = schema.header && (
-      <div className="col-span-full mb-4">
-        {schema.header.showTitle !== false && schema.title && (
-          <h2 className="text-lg font-semibold tracking-tight">{resolveLabel(schema.title)}</h2>
-        )}
-        {schema.header.showDescription !== false && schema.description && (
-          <p className="text-sm text-muted-foreground mt-1">{resolveLabel(schema.description)}</p>
-        )}
-        {schema.header.actions && schema.header.actions.length > 0 && (
-          <div className="flex gap-2 mt-3">
-            {schema.header.actions.map((action: { label: string; actionUrl?: string; actionType?: string; icon?: string }, i: number) => (
-              <Button key={i} variant="outline" size="sm">
-                {action.label}
-              </Button>
-            ))}
-          </div>
-        )}
-      </div>
-    );
-
-    const recordCountBadge = recordCount !== undefined && (
-      <span className="text-xs text-muted-foreground">
-        {recordCount.toLocaleString()} records
-      </span>
-    );
-
-    const userActionsAttr = userActions ? JSON.stringify(userActions) : undefined;
-
-    const refreshButton = onRefresh && (
-      <div className={cn("flex items-center justify-end gap-3 mb-2", !isMobile && "col-span-full")}>
-        {recordCountBadge}
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={handleRefresh}
-          disabled={refreshing}
-          aria-label="Refresh dashboard"
-        >
-          <RefreshCw className={cn("h-4 w-4 mr-2", refreshing && "animate-spin")} />
-          {refreshing ? 'Refreshing…' : 'Refresh All'}
-        </Button>
-      </div>
-    );
-
-    if (isMobile) {
-      // Separate metric widgets from other widgets for better mobile layout
-      const metricWidgets = schema.widgets?.filter((w: DashboardWidgetSchema) => w.type === 'metric') || [];
-      const otherWidgets = schema.widgets?.filter((w: DashboardWidgetSchema) => w.type !== 'metric') || [];
-      
-      return (
-        <div ref={ref} className={cn("flex flex-col gap-4 px-4", className)} data-user-actions={userActionsAttr} onClick={handleBackgroundClick} {...props}>
-          {headerSection}
-          {refreshButton}
-          
-          {/* Metric cards: 2-column grid */}
-          {metricWidgets.length > 0 && (
-            <div className="grid grid-cols-2 gap-3" onClick={handleBackgroundClick}>
-              {metricWidgets.map((widget: DashboardWidgetSchema, index: number) => renderWidget(widget, index))}
-            </div>
-          )}
-          
-          {/* Other widgets (charts, tables): full-width vertical stack */}
-          {otherWidgets.length > 0 && (
-            <div className="flex flex-col gap-4" onClick={handleBackgroundClick}>
-              {otherWidgets.map((widget: DashboardWidgetSchema, index: number) => renderWidget(widget, index, true))}
-            </div>
-          )}
-        </div>
-      );
-    }
-
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "grid auto-rows-min",
-          "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
-          className
-        )}
-        style={{
-            ...(columns > 4 && { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }),
-            gap: `${gap * 0.25}rem`
-        }}
-        data-user-actions={userActionsAttr}
-        onClick={handleBackgroundClick}
-        {...props}
-      >
-        {headerSection}
-        {refreshButton}
-        {schema.widgets?.map((widget: DashboardWidgetSchema, index: number) => renderWidget(widget, index))}
-      </div>
-    );
-  }
-);

package/src/DashboardWithConfig.tsx

@@ -1,211 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import * as React from 'react';
-import { useState, useCallback, useEffect } from 'react';
-import { Settings } from 'lucide-react';
-import { cn, Button } from '@object-ui/components';
-import type { DashboardSchema, DashboardWidgetSchema } from '@object-ui/types';
-
-import { DashboardRenderer } from './DashboardRenderer';
-import { DashboardConfigPanel } from './DashboardConfigPanel';
-import { WidgetConfigPanel } from './WidgetConfigPanel';
-
-// ---------------------------------------------------------------------------
-// Props
-// ---------------------------------------------------------------------------
-
-export interface DashboardWithConfigProps {
-  /** Dashboard schema for rendering */
-  schema: DashboardSchema;
-  /** Current dashboard configuration (for the config panel) */
-  config: Record<string, any>;
-  /** Called when config panel saves dashboard-level changes */
-  onConfigSave: (config: Record<string, any>) => void;
-  /** Called when widget config panel saves widget-level changes */
-  onWidgetSave?: (widgetId: string, config: Record<string, any>) => void;
-  /** Callback invoked when dashboard refresh is triggered */
-  onRefresh?: () => void;
-  /** Total record count */
-  recordCount?: number;
-  /** Whether the config panel is open initially */
-  defaultConfigOpen?: boolean;
-  /** Additional CSS class name for the container */
-  className?: string;
-}
-
-// ---------------------------------------------------------------------------
-// Component
-// ---------------------------------------------------------------------------
-
-/**
- * DashboardWithConfig — Composite component combining a DashboardRenderer
- * with a DashboardConfigPanel sidebar.
- *
- * Supports:
- * - Toggle config panel visibility via a Settings button
- * - Dashboard-level configuration editing
- * - Click-to-select a widget → sidebar switches to WidgetConfigPanel
- * - Back navigation from widget config to dashboard config
- * - Live preview: widget config changes are reflected in real time
- */
-export function DashboardWithConfig({
-  schema,
-  config,
-  onConfigSave,
-  onWidgetSave,
-  onRefresh,
-  recordCount,
-  defaultConfigOpen = false,
-  className,
-}: DashboardWithConfigProps) {
-  const [configOpen, setConfigOpen] = useState(defaultConfigOpen);
-  const [selectedWidgetId, setSelectedWidgetId] = useState<string | null>(null);
-
-  // Internal schema state for live preview during widget editing.
-  // Updated on every field change; reset when external schema prop changes.
-  const [liveSchema, setLiveSchema] = useState<DashboardSchema>(schema);
-  const [configVersion, setConfigVersion] = useState(0);
-
-  useEffect(() => {
-    setLiveSchema(schema);
-    setConfigVersion((v) => v + 1);
-  }, [schema]);
-
-  // Stable widget config for the config panel — only recomputed on
-  // widget selection change or save (configVersion), NOT on every live
-  // field change. This prevents useConfigDraft from resetting the draft.
-  const selectedWidgetConfig = React.useMemo(() => {
-    if (!selectedWidgetId || !liveSchema.widgets) return null;
-    const widget = liveSchema.widgets.find(
-      (w) => (w.id || w.title) === selectedWidgetId,
-    );
-    if (!widget) return null;
-    return {
-      id: widget.id ?? '',
-      title: widget.title ?? '',
-      description: widget.description ?? '',
-      type: widget.type ?? '',
-      object: widget.object ?? '',
-      categoryField: widget.categoryField ?? '',
-      valueField: widget.valueField ?? '',
-      aggregate: widget.aggregate ?? '',
-      colorVariant: widget.colorVariant ?? 'default',
-      actionUrl: widget.actionUrl ?? '',
-      layoutW: widget.layout?.w ?? 1,
-      layoutH: widget.layout?.h ?? 1,
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedWidgetId, configVersion]);
-
-  const handleWidgetSelect = useCallback(
-    (widgetId: string) => {
-      setSelectedWidgetId(widgetId);
-      setConfigOpen(true);
-    },
-    [],
-  );
-
-  const handleWidgetClose = useCallback(() => {
-    setSelectedWidgetId(null);
-  }, []);
-
-  // Live-update handler: updates liveSchema so DashboardRenderer re-renders.
-  const handleWidgetFieldChange = useCallback(
-    (field: string, value: any) => {
-      if (!selectedWidgetId) return;
-      setLiveSchema((prev) => {
-        if (!prev.widgets) return prev;
-        return {
-          ...prev,
-          widgets: prev.widgets.map((w) => {
-            if ((w.id || w.title) !== selectedWidgetId) return w;
-            if (field === 'layoutW') {
-              return { ...w, layout: { ...(w.layout || {}), w: value } as DashboardWidgetSchema['layout'] };
-            }
-            if (field === 'layoutH') {
-              return { ...w, layout: { ...(w.layout || {}), h: value } as DashboardWidgetSchema['layout'] };
-            }
-            return { ...w, [field]: value };
-          }),
-        };
-      });
-    },
-    [selectedWidgetId],
-  );
-
-  const handleWidgetSave = useCallback(
-    (widgetConfig: Record<string, any>) => {
-      if (selectedWidgetId && onWidgetSave) {
-        onWidgetSave(selectedWidgetId, widgetConfig);
-      }
-      setSelectedWidgetId(null);
-      setConfigVersion((v) => v + 1);
-    },
-    [selectedWidgetId, onWidgetSave],
-  );
-
-  const handleToggleConfig = useCallback(() => {
-    setConfigOpen((prev) => !prev);
-    setSelectedWidgetId(null);
-  }, []);
-
-  return (
-    <div
-      className={cn('flex h-full w-full', className)}
-      data-testid="dashboard-with-config"
-    >
-      {/* Main dashboard area */}
-      <div className="flex-1 min-w-0 overflow-auto relative">
-        {/* Settings toggle button */}
-        <div className="absolute top-2 right-2 z-10">
-          <Button
-            size="sm"
-            variant={configOpen ? 'default' : 'outline'}
-            onClick={handleToggleConfig}
-            data-testid="dashboard-config-toggle"
-          >
-            <Settings className="h-3.5 w-3.5 mr-1" />
-            Settings
-          </Button>
-        </div>
-
-        <DashboardRenderer
-          schema={liveSchema}
-          onRefresh={onRefresh}
-          recordCount={recordCount}
-          designMode={configOpen}
-          selectedWidgetId={selectedWidgetId}
-          onWidgetClick={handleWidgetSelect}
-        />
-      </div>
-
-      {/* Config panel sidebar */}
-      {configOpen && (
-        <div className="relative shrink-0">
-          {selectedWidgetId && selectedWidgetConfig ? (
-            <WidgetConfigPanel
-              open={true}
-              onClose={handleWidgetClose}
-              config={selectedWidgetConfig}
-              onSave={handleWidgetSave}
-              onFieldChange={handleWidgetFieldChange}
-            />
-          ) : (
-            <DashboardConfigPanel
-              open={true}
-              onClose={() => setConfigOpen(false)}
-              config={config}
-              onSave={onConfigSave}
-            />
-          )}
-        </div>
-      )}
-    </div>
-  );
-}