@object-ui/plugin-dashboard 3.0.2 → 3.1.0

package/src/DashboardRenderer.tsx

@@ -11,6 +11,14 @@ 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 = [
@@ -26,11 +34,21 @@ export interface DashboardRendererProps {
   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, ...props }, ref) => {
+  ({ 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);
@@ -38,7 +56,7 @@ export const DashboardRenderer = forwardRef<HTMLDivElement, DashboardRendererPro
     const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
     useEffect(() => {
-      const checkMobile = () => setIsMobile(window.innerWidth < 640);
+      const checkMobile = () => setIsMobile(window.innerWidth < 768);
       checkMobile();
       window.addEventListener('resize', checkMobile);
       return () => window.removeEventListener('resize', checkMobile);
@@ -61,17 +79,103 @@ export const DashboardRenderer = forwardRef<HTMLDivElement, DashboardRendererPro
       };
     }, [schema.refreshInterval, onRefresh, handleRefresh]);
 
-    const renderWidget = (widget: DashboardWidgetSchema) => {
+    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 as any).type;
-            if (widgetType === 'bar' || widgetType === 'line' || widgetType === 'area' || widgetType === 'pie' || widgetType === 'donut') {
-                const dataItems = Array.isArray((widget as any).data) ? (widget as any).data : (widget as any).data?.items || [];
-                const options = (widget as any).options || {};
-                const xAxisKey = options.xField || 'name';
-                const yField = options.yField || 'value';
+            const widgetType = widget.type;
+            const options = (widget.options || {}) as Record<string, any>;
+            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',
@@ -85,71 +189,197 @@ export const DashboardRenderer = forwardRef<HTMLDivElement, DashboardRendererPro
             }
 
             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',
-                    ...(widget as any).options,
-                    data: (widget as any).data?.items || [],
+                    ...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,
-                ...((widget as any).options || {})
+                ...options
             };
         };
         
         const componentSchema = getComponentSchema();
-        const isSelfContained = (widget as any).type === 'metric';
+        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={widget.id || widget.title}
-                    className={cn("h-full w-full", isMobile && "w-[85vw] shrink-0 snap-center")}
-                    style={!isMobile && widget.layout ? {
-                        gridColumn: `span ${widget.layout.w}`,
-                        gridRow: `span ${widget.layout.h}`
+                    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="h-full w-full" />
+                     <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={widget.id || widget.title}
+                key={widgetKey}
                 className={cn(
                     "overflow-hidden border-border/50 shadow-sm transition-all hover:shadow-md",
                     "bg-card/50 backdrop-blur-sm",
-                    isMobile && "w-[85vw] shrink-0 snap-center"
+                    forceMobileFullWidth && "w-full",
+                    designMode && "relative",
+                    selectionClasses
                 )}
-                style={!isMobile && widget.layout ? {
-                    gridColumn: `span ${widget.layout.w}`,
-                    gridRow: `span ${widget.layout.h}`
+                style={!isMobile && clampedLayout ? {
+                    gridColumn: `span ${clampedLayout.w}`,
+                    gridRow: `span ${clampedLayout.h}`
                 }: undefined}
+                {...designModeProps}
             >
-                {widget.title && (
+                {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={widget.title}>
-                            {widget.title}
+                        <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")}>
+                    <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(isMobile ? "flex justify-end mb-2" : "col-span-full flex justify-end mb-2")}>
+      <div className={cn("flex items-center justify-end gap-3 mb-2", !isMobile && "col-span-full")}>
+        {recordCountBadge}
         <Button
           variant="outline"
           size="sm"
@@ -164,15 +394,28 @@ export const DashboardRenderer = forwardRef<HTMLDivElement, DashboardRendererPro
     );
 
     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", className)} {...props}>
+        <div ref={ref} className={cn("flex flex-col gap-4 px-4", className)} data-user-actions={userActionsAttr} onClick={handleBackgroundClick} {...props}>
+          {headerSection}
           {refreshButton}
-          <div
-            className="flex overflow-x-auto snap-x snap-mandatory gap-3 pb-4 [-webkit-overflow-scrolling:touch]"
-            style={{ scrollPaddingLeft: '0.75rem' }}
-          >
-            {schema.widgets?.map((widget: DashboardWidgetSchema) => renderWidget(widget))}
-          </div>
+          
+          {/* 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>
       );
     }
@@ -189,10 +432,13 @@ export const DashboardRenderer = forwardRef<HTMLDivElement, DashboardRendererPro
             ...(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) => renderWidget(widget))}
+        {schema.widgets?.map((widget: DashboardWidgetSchema, index: number) => renderWidget(widget, index))}
       </div>
     );
   }

package/src/DashboardWithConfig.tsx

@@ -0,0 +1,211 @@
+/**
+ * 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>
+  );
+}

package/src/MetricCard.tsx

@@ -12,13 +12,20 @@ import { cn } from '@object-ui/components';
 import { ArrowDownIcon, ArrowUpIcon, MinusIcon } from 'lucide-react';
 import * as LucideIcons from 'lucide-react';
 
+/** 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;
+}
+
 export interface MetricCardProps {
-  title?: string;
+  title?: string | { key?: string; defaultValue?: string };
   value: string | number;
   icon?: string;
   trend?: 'up' | 'down' | 'neutral';
   trendValue?: string;
-  description?: string;
+  description?: string | { key?: string; defaultValue?: string };
   className?: string;
 }
 
@@ -43,7 +50,7 @@ export const MetricCard: React.FC<MetricCardProps> = ({
     <Card className={cn("h-full", className)} {...props}>
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
         <CardTitle className="text-sm font-medium">
-          {title}
+          {resolveLabel(title)}
         </CardTitle>
         {IconComponent && (
           <IconComponent className="h-4 w-4 text-muted-foreground" />
@@ -66,7 +73,7 @@ export const MetricCard: React.FC<MetricCardProps> = ({
                 {trendValue}
               </span>
             )}
-            {description}
+            {resolveLabel(description)}
           </p>
         )}
       </CardContent>