@growthub/cli 0.9.5 → 0.9.7

package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/workspace-builder.jsx

@@ -1,7 +1,19 @@
 "use client";
 
 import Link from "next/link";
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  DASHBOARD_TEMPLATES,
+  SAMPLE_DATA_BINDINGS,
+  SAMPLE_VIEW_ROWS,
+  cloneTemplateToDashboard,
+  cloneTemplateToTab,
+  defaultConfigFor,
+  normalizeWorkspaceTemplate,
+  unwrapWorkspaceTemplateImport,
+  validateWorkspaceConfig,
+  wrapWorkspaceTemplateExport
+} from "@/lib/workspace-schema";
 
 const DEFAULT_POSITION = { x: 4, y: 0, w: 4, h: 5 };
 const GRID_COLUMNS = 12;
@@ -27,19 +39,6 @@ function defaultTitleFor(kind) {
   }
 }
 
-function defaultConfigFor(kind) {
-  switch (kind) {
-    case "view":
-      return { source: "Companies", layout: "Table" };
-    case "iframe":
-      return { url: "" };
-    case "rich-text":
-      return { text: "" };
-    default:
-      return {};
-  }
-}
-
 function getTabs(canvas) {
   if (Array.isArray(canvas?.tabs) && canvas.tabs.length > 0) {
     return canvas.tabs;
@@ -76,6 +75,120 @@ function commitTabs(canvas, tabs, activeTabId) {
   return next;
 }
 
+function createDashboardRecord(name = "Untitled") {
+  const tab = createEmptyTab(name);
+  return {
+    id: generateId("dashboard"),
+    name,
+    createdBy: "Workspace owner",
+    updatedAt: "new",
+    status: "draft",
+    tabs: [tab],
+    activeTabId: tab.id
+  };
+}
+
+function createEmptyTab(name = "Untitled") {
+  return {
+    id: generateId("tab"),
+    name,
+    widgets: []
+  };
+}
+
+function cloneTabForDashboard(tab, name) {
+  return {
+    id: generateId("tab"),
+    name,
+    widgets: (tab?.widgets || []).map((widget) => ({
+      ...cloneConfig(widget),
+      id: generateId("widget")
+    }))
+  };
+}
+
+function normalizeDashboard(dashboard, fallbackCanvas) {
+  const tabs = Array.isArray(dashboard?.tabs) && dashboard.tabs.length
+    ? dashboard.tabs
+    : getTabs(fallbackCanvas).map((tab) => ({
+        ...tab,
+        id: tab.id === DEFAULT_TAB_ID ? generateId("tab") : tab.id
+      }));
+  const activeTabId = dashboard?.activeTabId && tabs.some((tab) => tab.id === dashboard.activeTabId)
+    ? dashboard.activeTabId
+    : tabs[0].id;
+  return {
+    ...dashboard,
+    tabs,
+    activeTabId
+  };
+}
+
+function dashboardCanvasFrom(dashboard, baseCanvas) {
+  const normalized = normalizeDashboard(dashboard, baseCanvas);
+  return commitTabs(baseCanvas, normalized.tabs, normalized.activeTabId);
+}
+
+function updateDashboardCanvas(dashboard, canvas) {
+  const tabs = getTabs(canvas);
+  const activeTabId = getActiveTabId(canvas);
+  return {
+    ...dashboard,
+    tabs,
+    activeTabId
+  };
+}
+
+function createDashboardFromTab(name, tab, source = {}) {
+  const clonedTab = cloneTabForDashboard(tab, name);
+  return {
+    ...source,
+    id: generateId("dashboard"),
+    name,
+    createdBy: source.createdBy || "Workspace owner",
+    updatedAt: "new",
+    status: "draft",
+    tabs: [clonedTab],
+    activeTabId: clonedTab.id
+  };
+}
+
+function getActiveDashboardId(dashboards, fallback) {
+  if (fallback && dashboards.some((dashboard) => dashboard.id === fallback)) {
+    return fallback;
+  }
+  return dashboards[0]?.id || null;
+}
+
+function activeDashboardIndex(dashboards, activeDashboardId) {
+  const index = dashboards.findIndex((dashboard) => dashboard.id === activeDashboardId);
+  return index >= 0 ? index : 0;
+}
+
+function syncActiveDashboard(config, activeDashboardId) {
+  const dashboards = config.dashboards || [];
+  const resolvedId = getActiveDashboardId(dashboards, activeDashboardId);
+  if (!resolvedId) return config;
+  return {
+    ...config,
+    dashboards: dashboards.map((dashboard) =>
+      dashboard.id === resolvedId ? updateDashboardCanvas(dashboard, config.canvas) : dashboard
+    )
+  };
+}
+
+function commitDashboardCanvas(config, activeDashboardId, nextCanvas) {
+  const dashboards = config.dashboards || [];
+  const resolvedId = getActiveDashboardId(dashboards, activeDashboardId);
+  return {
+    ...config,
+    dashboards: dashboards.map((dashboard) =>
+      dashboard.id === resolvedId ? updateDashboardCanvas(dashboard, nextCanvas) : dashboard
+    ),
+    canvas: nextCanvas
+  };
+}
+
 function findFreePosition(widgets) {
   const occupied = new Set();
   for (const widget of widgets) {
@@ -200,7 +313,152 @@ function widgetKindLabel(kind) {
   return kind.charAt(0).toUpperCase() + kind.slice(1);
 }
 
+function cloneConfig(value) {
+  return JSON.parse(JSON.stringify(value));
+}
+
+function normalizeChartValues(value) {
+  return String(value)
+    .split(",")
+    .map((item) => Number(item.trim()))
+    .filter((item) => Number.isFinite(item));
+}
+
+function serializeChartValues(values) {
+  return (Array.isArray(values) ? values : []).join(", ");
+}
+
+function parseLineList(value) {
+  return String(value)
+    .split(",")
+    .map((item) => item.trim())
+    .filter(Boolean);
+}
+
+function serializeLineList(values) {
+  return (Array.isArray(values) ? values : []).join(", ");
+}
+
+function parseManualRows(value, columns) {
+  const activeColumns = columns.length ? columns : ["Name", "Domain Name"];
+  return String(value)
+    .split("\n")
+    .map((row) => row.trim())
+    .filter(Boolean)
+    .map((row) => {
+      const values = row.split("|").map((item) => item.trim());
+      return activeColumns.reduce((record, column, index) => {
+        record[column] = values[index] || "";
+        return record;
+      }, {});
+    });
+}
+
+function serializeManualRows(rows, columns) {
+  const activeColumns = columns.length ? columns : ["Name", "Domain Name"];
+  return (Array.isArray(rows) ? rows : [])
+    .map((row) => activeColumns.map((column) => row?.[column] || "").join(" | "))
+    .join("\n");
+}
+
+const NORMALIZED_TEMPLATES = DASHBOARD_TEMPLATES.map((template) => ({
+  ...normalizeWorkspaceTemplate(template),
+  widgets: template.widgets
+}));
+
+function widgetKindFill(kind) {
+  switch (kind) {
+    case "chart": return "#dbeafe";
+    case "view": return "#fef3c7";
+    case "iframe": return "#ede9fe";
+    case "rich-text": return "#dcfce7";
+    default: return "#e5e7eb";
+  }
+}
+
+function TemplateMiniGrid({ template }) {
+  const widgets = Array.isArray(template?.widgets) ? template.widgets : [];
+  return <div
+    className="template-mini-grid"
+    aria-hidden="true"
+    style={{
+      "--template-mini-columns": GRID_COLUMNS,
+      "--template-mini-rows": GRID_ROWS
+    }}
+  >
+    {widgets.map((widget, index) => <span
+      className={`template-mini-widget kind-${widget.kind}`}
+      key={`${widget.kind}-${index}`}
+      style={{
+        gridColumn: `${widget.position.x + 1} / span ${widget.position.w}`,
+        gridRow: `${widget.position.y + 1} / span ${widget.position.h}`,
+        background: widgetKindFill(widget.kind)
+      }}
+    />)}
+  </div>;
+}
+
+function TemplateGallery({
+  templates,
+  previewTemplateId,
+  onPreview,
+  onClose,
+  onApplyToCurrentTab,
+  onCloneAsDashboard
+}) {
+  const previewTemplate = templates.find((template) => template.id === previewTemplateId) || null;
+  return <div className="template-gallery" role="dialog" aria-modal="true" aria-label="Workspace templates">
+    <div className="template-gallery-backdrop" onClick={onClose} aria-hidden="true" />
+    <section className="template-gallery-panel">
+      <header className="template-gallery-header">
+        <div>
+          <p>Workspace templates</p>
+          <h2>Pick a starting layout</h2>
+        </div>
+        <button type="button" aria-label="Close template gallery" onClick={onClose}>x</button>
+      </header>
+      <div className="template-gallery-grid">
+        {templates.map((template) => {
+          const isPreviewing = previewTemplate?.id === template.id;
+          return <article
+            className={`template-card${isPreviewing ? " previewing" : ""}`}
+            key={template.id}
+          >
+            <div className="template-card-header">
+              <strong>{template.name}</strong>
+              <span className="template-card-category">{template.category}</span>
+            </div>
+            <p className="template-card-description">{template.description}</p>
+            <div className="template-card-preview">
+              <TemplateMiniGrid template={template} />
+            </div>
+            <div className="template-card-meta">
+              <span>{template.widgetCount} widget{template.widgetCount === 1 ? "" : "s"}</span>
+              {template.bestFor.length ? <span>· Best for: {template.bestFor.join(", ")}</span> : null}
+            </div>
+            {template.tags.length ? <div className="template-card-tags">
+              {template.tags.map((tag) => <span key={tag}>#{tag}</span>)}
+            </div> : null}
+            <div className="template-card-actions">
+              <button type="button" onClick={() => onPreview(template.id)}>{isPreviewing ? "Previewing" : "Preview"}</button>
+              <button type="button" onClick={() => onApplyToCurrentTab(template.id)}>Apply to Current Tab</button>
+              <button type="button" onClick={() => onCloneAsDashboard(template.id)}>Clone as New Dashboard</button>
+            </div>
+          </article>;
+        })}
+      </div>
+      {previewTemplate ? <footer className="template-gallery-footer" aria-live="polite">
+        <strong>{previewTemplate.name}</strong>
+        <span>{previewTemplate.preview?.summary || previewTemplate.description}</span>
+      </footer> : null}
+    </section>
+  </div>;
+}
+
 function WidgetPreview({ widget, selected, onSelect, onRemove, onResizeStart }) {
+  const viewColumns = widget.config?.columns?.length ? widget.config.columns : ["Name", "Domain Name"];
+  const viewRows = widget.config?.rows?.length ? widget.config.rows : SAMPLE_VIEW_ROWS;
+  const chartValues = widget.config?.values?.length ? widget.config.values : defaultConfigFor("chart").values;
   return <article
     className={`workspace-widget-preview${selected ? " selected" : ""}`}
     onClick={onSelect}
@@ -221,16 +479,15 @@ function WidgetPreview({ widget, selected, onSelect, onRemove, onResizeStart })
         type="button"
       >x</button>
     </div>
-    {widget.kind === "view" ? <div className="workspace-view-table" aria-label={`${widget.title} preview`}>
-      <div><span>Name</span><span>Domain Name</span></div>
-      {[
-        ["CMWL Direct", "centerformedica"],
-        ["Medi-Weightloss", "mediweightloss.com"],
-        ["Optima Tyler", "optimatyler.com"],
-        ["Balanced Hormone He...", "balancedhormor"],
-        ["Jolie Aesthetics RVA", "jolie-aesthetics.c"],
-        ["Livea Centers", "livea.com"]
-      ].map(([name, domain]) => <div key={name}><span>{name}</span><span>{domain}</span></div>)}
+    {widget.kind === "view" ? <div
+      className="workspace-view-table"
+      aria-label={`${widget.title} preview`}
+      style={{ "--workspace-view-columns": viewColumns.length }}
+    >
+      <div>{viewColumns.map((column) => <span key={column}>{column}</span>)}</div>
+      {viewRows.slice(0, 6).map((row, rowIndex) => <div key={rowIndex}>
+        {viewColumns.map((column) => <span key={column}>{row?.[column] || ""}</span>)}
+      </div>)}
       <footer>Calculate</footer>
     </div> : null}
     {widget.kind === "iframe" ? <div className="workspace-iframe-preview">
@@ -238,7 +495,7 @@ function WidgetPreview({ widget, selected, onSelect, onRemove, onResizeStart })
     </div> : null}
     {widget.kind === "rich-text" ? <p className="workspace-rich-text-preview">{widget.config?.text || "Start writing..."}</p> : null}
     {widget.kind === "chart" ? <div className="workspace-chart-preview">
-      {[58, 36, 72, 48, 64].map((height, index) => <span key={index} style={{ height: `${height}%` }} />)}
+      {chartValues.map((height, index) => <span key={index} style={{ height: `${Math.max(5, Math.min(100, height))}%` }} />)}
     </div> : null}
     {selected ? ["nw", "ne", "sw", "se"].map((corner) => <button
       aria-label={`Resize ${widget.title} from ${corner} corner`}
@@ -251,12 +508,34 @@ function WidgetPreview({ widget, selected, onSelect, onRemove, onResizeStart })
 }
 
 function WorkspaceBuilder({ initialConfig, adapterConfig, integrationAdapter }) {
-  const [config, setConfig] = useState(initialConfig);
+  const [config, setConfig] = useState(() => {
+    const dashboards = Array.isArray(initialConfig.dashboards) && initialConfig.dashboards.length
+      ? initialConfig.dashboards.map((dashboard, index) =>
+          normalizeDashboard(dashboard, index === 0 ? initialConfig.canvas : undefined)
+        )
+      : [createDashboardRecord("Untitled")];
+    return {
+      ...initialConfig,
+      dashboards,
+      canvas: dashboardCanvasFrom(dashboards[0], initialConfig.canvas)
+    };
+  });
   const [saving, setSaving] = useState(false);
   const [panelOpen, setPanelOpen] = useState(true);
+  const [templateGalleryOpen, setTemplateGalleryOpen] = useState(false);
+  const [previewTemplateId, setPreviewTemplateId] = useState(null);
+  const [editingDashboardId, setEditingDashboardId] = useState(null);
+  const [activeDashboardId, setActiveDashboardId] = useState(() =>
+    getActiveDashboardId(
+      Array.isArray(initialConfig.dashboards) && initialConfig.dashboards.length ? initialConfig.dashboards : [],
+      null
+    )
+  );
   const gridRef = useRef(null);
   const canvas = config.canvas;
-  const dashboards = config.dashboards;
+  const dashboards = config.dashboards || [];
+  const resolvedActiveDashboardId = getActiveDashboardId(dashboards, activeDashboardId);
+  const resolvedActiveDashboardIndex = activeDashboardIndex(dashboards, resolvedActiveDashboardId);
   const widgetTypes = config.widgetTypes;
   const tabs = getTabs(canvas);
   const activeTabId = getActiveTabId(canvas);
@@ -267,7 +546,9 @@ function WorkspaceBuilder({ initialConfig, adapterConfig, integrationAdapter })
   const [dragStartCell, setDragStartCell] = useState(null);
   const [dragPreview, setDragPreview] = useState(null);
   const [resizeDrag, setResizeDrag] = useState(null);
+  const [configMessage, setConfigMessage] = useState("");
   const resizeDragRef = useRef(null);
+  const importInputRef = useRef(null);
   const addSlot = dragPreview || selectedPosition;
   const selectedWidget = activeWidgets.find((widget) => widget.id === selectedWidgetId) || null;
   const occupiedCells = useMemo(() => {
@@ -304,9 +585,9 @@ function WorkspaceBuilder({ initialConfig, adapterConfig, integrationAdapter })
       setSelectedWidgetId(widget.id);
       setSelectedPosition(findFreePosition([...existingWidgets, widget]));
       setDragPreview(null);
-      return { ...prev, canvas: commitTabs(prev.canvas, nextTabs, prevActiveId) };
+      return commitDashboardCanvas(prev, activeDashboardId, commitTabs(prev.canvas, nextTabs, prevActiveId));
     });
-  }, [addSlot]);
+  }, [activeDashboardId, addSlot]);
 
   const switchTab = useCallback((tabId) => {
     setConfig((prev) => {
@@ -317,9 +598,9 @@ function WorkspaceBuilder({ initialConfig, adapterConfig, integrationAdapter })
       setSelectedWidgetId(null);
       setSelectedPosition(findFreePosition(nextTab?.widgets || []));
       setDragPreview(null);
-      return { ...prev, canvas: commitTabs(prev.canvas, prevTabs, tabId) };
+      return commitDashboardCanvas(prev, activeDashboardId, commitTabs(prev.canvas, prevTabs, tabId));
     });
-  }, []);
+  }, [activeDashboardId]);
 
   const addTab = useCallback(() => {
     setConfig((prev) => {
@@ -338,51 +619,365 @@ function WorkspaceBuilder({ initialConfig, adapterConfig, integrationAdapter })
       setSelectedWidgetId(null);
       setSelectedPosition({ ...DEFAULT_POSITION });
       setDragPreview(null);
-      return { ...prev, canvas: commitTabs(prev.canvas, nextTabs, newTab.id) };
+      return commitDashboardCanvas(prev, activeDashboardId, commitTabs(prev.canvas, nextTabs, newTab.id));
     });
-  }, []);
+  }, [activeDashboardId]);
 
   const addDashboard = useCallback(() => {
+    setConfig((prev) => {
+      const synced = syncActiveDashboard(prev, activeDashboardId);
+      const prevDashboards = synced.dashboards || [];
+      const name = `Dashboard ${prevDashboards.length + 1}`;
+      const dashboard = createDashboardRecord(name);
+      setSelectedWidgetId(null);
+      setSelectedPosition({ ...DEFAULT_POSITION });
+      setDragPreview(null);
+      setEditingDashboardId(dashboard.id);
+      setActiveDashboardId(dashboard.id);
+      setConfigMessage(`Created ${name}`);
+      return {
+        ...synced,
+        dashboards: [...prevDashboards, dashboard],
+        canvas: dashboardCanvasFrom(dashboard, synced.canvas)
+      };
+    });
+  }, [activeDashboardId]);
+
+  const selectDashboard = useCallback((index) => {
+    setConfig((prev) => {
+      const synced = syncActiveDashboard(prev, activeDashboardId);
+      const prevDashboards = synced.dashboards || [];
+      const dashboard = prevDashboards[index];
+      if (!dashboard) return prev;
+      const normalized = normalizeDashboard(dashboard, index === 0 ? synced.canvas : undefined);
+      setSelectedWidgetId(null);
+      setSelectedPosition(findFreePosition(getTabs(dashboardCanvasFrom(normalized, prev.canvas))[0]?.widgets || []));
+      setDragPreview(null);
+      setEditingDashboardId(dashboard.id);
+      setActiveDashboardId(dashboard.id);
+      setConfigMessage(`Editing ${dashboard.name}`);
+      return {
+        ...synced,
+        dashboards: prevDashboards.map((item) => item.id === dashboard.id ? normalized : item),
+        canvas: dashboardCanvasFrom(normalized, synced.canvas)
+      };
+    });
+  }, [activeDashboardId]);
+
+  const renameDashboard = useCallback((dashboardId, name) => {
+    const nextName = name.trimStart();
+    setConfig((prev) => {
+      const prevDashboards = prev.dashboards || [];
+      const index = prevDashboards.findIndex((dashboard) => dashboard.id === dashboardId);
+      if (index < 0) return prev;
+      const displayName = nextName || "Untitled";
+      const nextDashboards = prevDashboards.map((dashboard) =>
+        dashboard.id === dashboardId ? { ...dashboard, name: displayName, updatedAt: "new" } : dashboard
+      );
+      const nextDashboardsWithTabs = nextDashboards.map((dashboard, dashboardIndex) => {
+        if (dashboardIndex !== index) return dashboard;
+        const normalized = normalizeDashboard(dashboard, index === 0 ? prev.canvas : undefined);
+        const renamedTabs = normalized.tabs.map((tab, tabIndex) =>
+          tabIndex === 0 ? { ...tab, name: displayName } : tab
+        );
+        return { ...normalized, tabs: renamedTabs };
+      });
+      const activeDashboard = nextDashboardsWithTabs.find((dashboard) => dashboard.id === getActiveDashboardId(nextDashboardsWithTabs, activeDashboardId));
+      return {
+        ...prev,
+        dashboards: nextDashboardsWithTabs,
+        canvas: dashboardCanvasFrom(activeDashboard || nextDashboardsWithTabs[0], prev.canvas)
+      };
+    });
+  }, [activeDashboardId]);
+
+  const updateDashboardStatus = useCallback((dashboardId, status) => {
     setConfig((prev) => ({
       ...prev,
-      dashboards: [
-        ...(prev.dashboards || []),
-        {
-          id: generateId("dashboard"),
-          name: "Untitled",
-          createdBy: "Workspace owner",
-          updatedAt: "new",
-          status: "draft"
-        }
-      ]
+      dashboards: (prev.dashboards || []).map((dashboard) =>
+        dashboard.id === dashboardId ? { ...dashboard, status, updatedAt: "new" } : dashboard
+      )
     }));
   }, []);
 
+  const cloneDashboard = useCallback((index) => {
+    setConfig((prev) => {
+      const synced = syncActiveDashboard(prev, activeDashboardId);
+      const prevDashboards = synced.dashboards || [];
+      const sourceDashboard = prevDashboards[index];
+      if (!sourceDashboard) return prev;
+      const normalizedSource = normalizeDashboard(sourceDashboard, index === resolvedActiveDashboardIndex ? synced.canvas : undefined);
+      const name = `${sourceDashboard.name} Copy`;
+      const dashboard = {
+        ...normalizedSource,
+        id: generateId("dashboard"),
+        name,
+        updatedAt: "new",
+        status: "draft",
+        tabs: normalizedSource.tabs.map((tab, tabIndex) =>
+          cloneTabForDashboard(tab, tabIndex === 0 ? name : tab.name)
+        )
+      };
+      dashboard.activeTabId = dashboard.tabs[0].id;
+      setSelectedWidgetId(null);
+      setSelectedPosition(findFreePosition(dashboard.tabs[0].widgets));
+      setDragPreview(null);
+      setEditingDashboardId(dashboard.id);
+      setActiveDashboardId(dashboard.id);
+      setConfigMessage(`Cloned ${sourceDashboard.name}`);
+      return {
+        ...synced,
+        dashboards: [...prevDashboards, dashboard],
+        canvas: dashboardCanvasFrom(dashboard, synced.canvas)
+      };
+    });
+  }, [activeDashboardId, resolvedActiveDashboardIndex]);
+
+  const deleteDashboard = useCallback((index) => {
+    setConfig((prev) => {
+      const synced = syncActiveDashboard(prev, activeDashboardId);
+      const prevDashboards = synced.dashboards || [];
+      if (!prevDashboards[index]) return prev;
+      if (prevDashboards.length <= 1) {
+        const dashboard = createDashboardRecord("Untitled");
+        setSelectedWidgetId(null);
+        setSelectedPosition({ ...DEFAULT_POSITION });
+        setDragPreview(null);
+        setEditingDashboardId(dashboard.id);
+        setActiveDashboardId(dashboard.id);
+        setConfigMessage("Reset dashboard");
+        return {
+          ...synced,
+          dashboards: [dashboard],
+          canvas: dashboardCanvasFrom(dashboard, synced.canvas)
+        };
+      }
+      const removed = prevDashboards[index];
+      const nextDashboards = prevDashboards.filter((_, dashboardIndex) => dashboardIndex !== index);
+      const nextActiveIndex = Math.min(index, nextDashboards.length - 1);
+      const nextActiveDashboard = normalizeDashboard(nextDashboards[nextActiveIndex], synced.canvas);
+      setSelectedWidgetId(null);
+      setSelectedPosition(findFreePosition(nextActiveDashboard.tabs[0]?.widgets || []));
+      setDragPreview(null);
+      setEditingDashboardId(nextActiveDashboard.id);
+      setActiveDashboardId(nextActiveDashboard.id);
+      setConfigMessage(`Deleted ${removed.name}`);
+      return {
+        ...synced,
+        dashboards: nextDashboards.map((dashboard) => dashboard.id === nextActiveDashboard.id ? nextActiveDashboard : dashboard),
+        canvas: dashboardCanvasFrom(nextActiveDashboard, synced.canvas)
+      };
+    });
+  }, [activeDashboardId]);
+
+  const duplicateDashboard = useCallback(() => {
+    cloneDashboard(resolvedActiveDashboardIndex);
+  }, [cloneDashboard, resolvedActiveDashboardIndex]);
+
+  const duplicateTab = useCallback(() => {
+    setConfig((prev) => {
+      const prevTabs = getTabs(prev.canvas);
+      const prevActiveId = getActiveTabId(prev.canvas);
+      const source = prevTabs.find((tab) => tab.id === prevActiveId) || prevTabs[0];
+      const stableFirst = prevTabs.length === 1 && prevTabs[0].id === DEFAULT_TAB_ID
+        ? { ...prevTabs[0], id: generateId("tab") }
+        : prevTabs[0];
+      const stableTabs = prevTabs.length === 1 ? [stableFirst] : prevTabs;
+      const cloned = {
+        id: generateId("tab"),
+        name: `${source.name} Copy`,
+        widgets: (source.widgets || []).map((widget) => ({
+          ...cloneConfig(widget),
+          id: generateId("widget")
+        }))
+      };
+      const nextTabs = [...stableTabs, cloned];
+      setSelectedWidgetId(null);
+      setSelectedPosition(findFreePosition(cloned.widgets));
+      setDragPreview(null);
+      return commitDashboardCanvas(prev, activeDashboardId, commitTabs(prev.canvas, nextTabs, cloned.id));
+    });
+  }, [activeDashboardId]);
+
+  const deleteTab = useCallback((tabId) => {
+    setConfig((prev) => {
+      const prevTabs = getTabs(prev.canvas);
+      const tab = prevTabs.find((item) => item.id === tabId);
+      if (!tab) return prev;
+      if (prevTabs.length <= 1) {
+        const fallback = createEmptyTab(tab.name || "Tab 1");
+        setSelectedWidgetId(null);
+        setSelectedPosition({ ...DEFAULT_POSITION });
+        setDragPreview(null);
+        setConfigMessage(`Cleared ${tab.name}`);
+        return commitDashboardCanvas(prev, activeDashboardId, commitTabs(prev.canvas, [fallback], fallback.id));
+      }
+      const nextTabs = prevTabs.filter((item) => item.id !== tabId);
+      const activeIndex = prevTabs.findIndex((item) => item.id === tabId);
+      const nextActiveTab = nextTabs[Math.min(activeIndex, nextTabs.length - 1)] || nextTabs[0];
+      setSelectedWidgetId(null);
+      setSelectedPosition(findFreePosition(nextActiveTab.widgets || []));
+      setDragPreview(null);
+      setConfigMessage(`Deleted ${tab.name}`);
+      return commitDashboardCanvas(prev, activeDashboardId, commitTabs(prev.canvas, nextTabs, nextActiveTab.id));
+    });
+  }, [activeDashboardId]);
+
+  const applyTemplateToCurrentTab = useCallback((templateId) => {
+    const template = DASHBOARD_TEMPLATES.find((item) => item.id === templateId);
+    if (!template) return;
+    const clonedTab = cloneTemplateToTab(template, { tabName: template.name, idFactory: generateId });
+    setConfig((prev) => {
+      const prevTabs = getTabs(prev.canvas);
+      const prevActiveId = getActiveTabId(prev.canvas);
+      const dashboardIndex = activeDashboardIndex(prev.dashboards || [], activeDashboardId);
+      const stableTabs = prevTabs.length === 1 && prevTabs[0].id === DEFAULT_TAB_ID
+        ? [{ ...prevTabs[0], id: DEFAULT_TAB_ID }]
+        : prevTabs;
+      const nextTabs = stableTabs.map((tab) =>
+        tab.id === prevActiveId ? { ...tab, name: clonedTab.name, widgets: clonedTab.widgets } : tab
+      );
+      const nextCanvas = commitTabs(prev.canvas, nextTabs, prevActiveId);
+      const nextDashboards = (prev.dashboards || []).map((dashboard, index) =>
+        index === dashboardIndex
+          ? updateDashboardCanvas({ ...dashboard, name: template.name, updatedAt: "new", status: "draft" }, nextCanvas)
+          : dashboard
+      );
+      return {
+        ...prev,
+        dashboards: nextDashboards,
+        canvas: nextCanvas
+      };
+    });
+    setSelectedWidgetId(null);
+    setSelectedPosition(findFreePosition(clonedTab.widgets));
+    setDragPreview(null);
+    setConfigMessage(`Applied ${template.name} to current tab`);
+    setTemplateGalleryOpen(false);
+    setPreviewTemplateId(null);
+  }, [activeDashboardId]);
+
+  const cloneTemplateAsDashboard = useCallback((templateId) => {
+    const template = DASHBOARD_TEMPLATES.find((item) => item.id === templateId);
+    if (!template) return;
+    const cloned = cloneTemplateToDashboard(template, { idFactory: generateId });
+    setConfig((prev) => {
+      const synced = syncActiveDashboard(prev, activeDashboardId);
+      const dashboard = {
+        ...cloned.dashboard,
+        tabs: [cloned.tab],
+        activeTabId: cloned.tab.id
+      };
+      setActiveDashboardId(dashboard.id);
+      return {
+        ...synced,
+        dashboards: [...(synced.dashboards || []), dashboard],
+        canvas: dashboardCanvasFrom(dashboard, synced.canvas)
+      };
+    });
+    setSelectedWidgetId(null);
+    setSelectedPosition(findFreePosition(cloned.tab.widgets));
+    setDragPreview(null);
+    setConfigMessage(`Cloned ${template.name} as dashboard`);
+    setTemplateGalleryOpen(false);
+    setPreviewTemplateId(null);
+  }, [activeDashboardId]);
+
+  const exportConfig = useCallback(() => {
+    const syncedConfig = syncActiveDashboard(config, activeDashboardId);
+    const primaryDashboard = syncedConfig.dashboards?.[0] || {};
+    const wrapped = wrapWorkspaceTemplateExport(
+      {
+        dashboards: syncedConfig.dashboards,
+        widgetTypes: syncedConfig.widgetTypes,
+        canvas: syncedConfig.canvas
+      },
+      {
+        name: primaryDashboard.name || syncedConfig.name || "Workspace template",
+        description: syncedConfig.description || ""
+      }
+    );
+    const blob = new Blob([`${JSON.stringify(wrapped, null, 2)}\n`], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement("a");
+    anchor.href = url;
+    anchor.download = "growthub-dashboard.template.json";
+    anchor.click();
+    URL.revokeObjectURL(url);
+    setConfigMessage("Exported workspace template");
+  }, [activeDashboardId, config]);
+
+  const importConfig = useCallback(async (event) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    try {
+      const parsed = JSON.parse(await file.text());
+      const payload = unwrapWorkspaceTemplateImport(parsed);
+      validateWorkspaceConfig(payload);
+      const importedDashboards = (payload.dashboards || []).map((dashboard, index) =>
+        normalizeDashboard(dashboard, index === 0 ? payload.canvas : undefined)
+      );
+      const importedActiveDashboard = importedDashboards[0];
+      setConfig((prev) => ({
+        ...prev,
+        dashboards: importedDashboards,
+        widgetTypes: payload.widgetTypes,
+        canvas: importedActiveDashboard ? dashboardCanvasFrom(importedActiveDashboard, payload.canvas) : payload.canvas
+      }));
+      setActiveDashboardId(importedActiveDashboard?.id || null);
+      const importedTabs = getTabs(importedActiveDashboard ? dashboardCanvasFrom(importedActiveDashboard, payload.canvas) : payload.canvas);
+      setSelectedWidgetId(null);
+      setSelectedPosition(findFreePosition(importedTabs[0]?.widgets || []));
+      setDragPreview(null);
+      setConfigMessage(`Imported ${file.name}`);
+    } catch (error) {
+      setConfigMessage(error.message || "Import failed");
+    } finally {
+      event.target.value = "";
+    }
+  }, []);
+
   const save = useCallback(async () => {
     if (saving) return;
     setSaving(true);
     try {
       const stamp = todayIsoDate();
-      const updatedDashboards = (config.dashboards || []).map((dashboard, index) =>
-        index === 0 ? { ...dashboard, updatedAt: stamp } : dashboard
+      const syncedConfig = syncActiveDashboard(config, activeDashboardId);
+      const updatedDashboards = (syncedConfig.dashboards || []).map((dashboard) =>
+        dashboard.id === getActiveDashboardId(syncedConfig.dashboards || [], activeDashboardId)
+          ? { ...dashboard, updatedAt: stamp }
+          : dashboard
       );
       const response = await fetch("/api/workspace", {
         method: "PATCH",
         headers: { "content-type": "application/json" },
         body: JSON.stringify({
           dashboards: updatedDashboards,
-          widgetTypes: config.widgetTypes,
-          canvas: config.canvas
+          widgetTypes: syncedConfig.widgetTypes,
+          canvas: syncedConfig.canvas
         })
       });
       const payload = await response.json();
       if (response.ok && payload.workspaceConfig) {
-        setConfig(payload.workspaceConfig);
+        const savedDashboards = (payload.workspaceConfig.dashboards || []).map((dashboard, index) =>
+          normalizeDashboard(dashboard, index === 0 ? payload.workspaceConfig.canvas : undefined)
+        );
+        const savedActiveDashboard = savedDashboards.find((dashboard) => dashboard.id === activeDashboardId) || savedDashboards[0];
+        setConfig({
+          ...payload.workspaceConfig,
+          dashboards: savedDashboards,
+          canvas: savedActiveDashboard ? dashboardCanvasFrom(savedActiveDashboard, payload.workspaceConfig.canvas) : payload.workspaceConfig.canvas
+        });
+        setConfigMessage("Saved dashboard config");
+      } else {
+        setConfigMessage(payload.error || "Save failed");
       }
+    } catch (error) {
+      setConfigMessage(error.message || "Save failed");
     } finally {
       setSaving(false);
     }
-  }, [saving, config]);
+  }, [activeDashboardId, saving, config]);
 
   const reopenPanel = useCallback(() => setPanelOpen(true), []);
   const closePanel = useCallback(() => setPanelOpen(false), []);
@@ -449,9 +1044,9 @@ function WorkspaceBuilder({ initialConfig, adapterConfig, integrationAdapter })
           )
         };
       });
-      return { ...prev, canvas: commitTabs(prev.canvas, nextTabs, prevActiveId) };
+      return commitDashboardCanvas(prev, activeDashboardId, commitTabs(prev.canvas, nextTabs, prevActiveId));
     });
-  }, [activeWidgets]);
+  }, [activeDashboardId, activeWidgets]);
   const finishResizeDrag = useCallback(() => {
     if (!resizeDragRef.current) return;
     resizeDragRef.current = null;
@@ -475,9 +1070,9 @@ function WorkspaceBuilder({ initialConfig, adapterConfig, integrationAdapter })
           )
         };
       });
-      return { ...prev, canvas: commitTabs(prev.canvas, nextTabs, prevActiveId) };
+      return commitDashboardCanvas(prev, activeDashboardId, commitTabs(prev.canvas, nextTabs, prevActiveId));
     });
-  }, [selectedWidgetId]);
+  }, [activeDashboardId, selectedWidgetId]);
   const updateSelectedWidgetConfig = useCallback((updates) => {
     if (!selectedWidget) return;
     updateSelectedWidget({ config: { ...(selectedWidget.config || {}), ...updates } });
@@ -493,10 +1088,24 @@ function WorkspaceBuilder({ initialConfig, adapterConfig, integrationAdapter })
       const nextActiveWidgets = nextTabs.find((tab) => tab.id === prevActiveId)?.widgets || [];
       setSelectedWidgetId(null);
       setSelectedPosition(findFreePosition(nextActiveWidgets));
-      return { ...prev, canvas: commitTabs(prev.canvas, nextTabs, prevActiveId) };
+      return commitDashboardCanvas(prev, activeDashboardId, commitTabs(prev.canvas, nextTabs, prevActiveId));
     });
+  }, [activeDashboardId]);
+
+  const closeTemplateGallery = useCallback(() => {
+    setTemplateGalleryOpen(false);
+    setPreviewTemplateId(null);
   }, []);
 
+  useEffect(() => {
+    if (!templateGalleryOpen) return undefined;
+    const handler = (event) => {
+      if (event.key === "Escape") closeTemplateGallery();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [templateGalleryOpen, closeTemplateGallery]);
+
   const builderStyle = panelOpen ? undefined : { gridTemplateColumns: COLLAPSED_GRID_COLUMNS };
 
   return <main className="workspace-builder" style={builderStyle}>
@@ -525,10 +1134,22 @@ function WorkspaceBuilder({ initialConfig, adapterConfig, integrationAdapter })
             <h1>{config.name}</h1>
           </div>
           <div className="workspace-toolbar-actions">
+            <button type="button" onClick={() => setTemplateGalleryOpen(true)}>Templates</button>
             <button type="button" onClick={addDashboard}>New Dashboard</button>
+            <button type="button" onClick={duplicateDashboard}>Duplicate Dashboard</button>
+            <button type="button" onClick={() => importInputRef.current?.click()}>Import</button>
+            <button type="button" onClick={exportConfig}>Export</button>
             <button type="button" onClick={save} disabled={saving}>{saving ? "Saving..." : "Save"}</button>
           </div>
+          <input
+            ref={importInputRef}
+            type="file"
+            accept="application/json,.json"
+            className="workspace-hidden-input"
+            onChange={importConfig}
+          />
         </header>
+        {configMessage ? <p className="workspace-config-message">{configMessage}</p> : null}
 
         <section className="workspace-table" id="dashboards" aria-label="Dashboards">
           <div className="workspace-table-heading">
@@ -540,12 +1161,45 @@ function WorkspaceBuilder({ initialConfig, adapterConfig, integrationAdapter })
             <span>Created by</span>
             <span>Last update</span>
             <span>Status</span>
+            <span>Actions</span>
           </div>
-          {dashboards.map((dashboard) => <div className="workspace-table-row" key={dashboard.id}>
-              <span>{dashboard.name}</span>
+          {dashboards.map((dashboard, index) => <div className="workspace-table-row" key={dashboard.id}>
+              <span className="workspace-dashboard-title">
+                {editingDashboardId === dashboard.id ? <input
+                  aria-label={`Rename ${dashboard.name}`}
+                  onBlur={() => setEditingDashboardId(null)}
+                  onChange={(event) => renameDashboard(dashboard.id, event.target.value)}
+                  onKeyDown={(event) => {
+                    if (event.key === "Enter" || event.key === "Escape") {
+                      event.currentTarget.blur();
+                    }
+                  }}
+                  value={dashboard.name}
+                /> : <button
+                  className={index === resolvedActiveDashboardIndex ? "active" : ""}
+                  onClick={() => selectDashboard(index)}
+                  type="button"
+                >{dashboard.name}</button>}
+              </span>
               <span>{dashboard.createdBy}</span>
               <span>{dashboard.updatedAt}</span>
-              <code>{dashboard.status}</code>
+              <span>
+                <select
+                  aria-label={`Status for ${dashboard.name}`}
+                  onChange={(event) => updateDashboardStatus(dashboard.id, event.target.value)}
+                  value={dashboard.status}
+                >
+                  <option value="draft">draft</option>
+                  <option value="active">active</option>
+                  <option value="archived">archived</option>
+                </select>
+              </span>
+              <span className="workspace-dashboard-actions">
+                <button type="button" onClick={() => selectDashboard(index)}>Edit</button>
+                <button type="button" onClick={() => setEditingDashboardId(dashboard.id)}>Rename</button>
+                <button type="button" onClick={() => cloneDashboard(index)}>Clone</button>
+                <button type="button" onClick={() => deleteDashboard(index)}>Delete</button>
+              </span>
             </div>)}
         </section>
 
@@ -556,8 +1210,28 @@ function WorkspaceBuilder({ initialConfig, adapterConfig, integrationAdapter })
                 className={tab.id === activeTabId ? "active" : ""}
                 type="button"
                 onClick={() => switchTab(tab.id)}
-              >{tab.name}</button>)}
+              >
+                <span>{tab.name}</span>
+                <span
+                  aria-label={`Delete tab ${tab.name}`}
+                  className="workspace-tab-delete"
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    deleteTab(tab.id);
+                  }}
+                  onKeyDown={(event) => {
+                    if (event.key === "Enter" || event.key === " ") {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      deleteTab(tab.id);
+                    }
+                  }}
+                  role="button"
+                  tabIndex={0}
+                >x</span>
+              </button>)}
             <button type="button" onClick={addTab}>New Tab</button>
+            <button type="button" onClick={duplicateTab}>Duplicate Tab</button>
           </div>
           <div
             className="workspace-grid"
@@ -610,6 +1284,15 @@ function WorkspaceBuilder({ initialConfig, adapterConfig, integrationAdapter })
         </section>
       </section>
 
+      {templateGalleryOpen ? <TemplateGallery
+        templates={NORMALIZED_TEMPLATES}
+        previewTemplateId={previewTemplateId}
+        onPreview={setPreviewTemplateId}
+        onClose={closeTemplateGallery}
+        onApplyToCurrentTab={applyTemplateToCurrentTab}
+        onCloneAsDashboard={cloneTemplateAsDashboard}
+      /> : null}
+
       {panelOpen ? <aside className="workspace-widget-panel" id="widgets" aria-label="Widget configuration">
         <div className="workspace-panel-title">
           <button type="button" aria-label="Close widget panel" onClick={closePanel}>x</button>
@@ -622,6 +1305,27 @@ function WorkspaceBuilder({ initialConfig, adapterConfig, integrationAdapter })
             <span>Title</span>
             <input value={selectedWidget.title} onChange={(event) => updateSelectedWidget({ title: event.target.value })} />
           </label>
+          {selectedWidget.kind === "chart" ? <section className="workspace-field-stack">
+            <label>
+              <span>Sample Values</span>
+              <input
+                value={serializeChartValues(selectedWidget.config?.values || [])}
+                onChange={(event) => updateSelectedWidgetConfig({ values: normalizeChartValues(event.target.value) })}
+              />
+            </label>
+            <label>
+              <span>Static Binding</span>
+              <select
+                value={selectedWidget.config?.binding?.mode || "json"}
+                onChange={(event) => updateSelectedWidgetConfig({
+                  binding: event.target.value === "csv" ? SAMPLE_DATA_BINDINGS.contentCsv : SAMPLE_DATA_BINDINGS.reportingJson
+                })}
+              >
+                <option value="json">Sample JSON</option>
+                <option value="csv">Sample CSV</option>
+              </select>
+            </label>
+          </section> : null}
           {selectedWidget.kind === "iframe" ? <label>
             <span>URL to Embed</span>
             <input
@@ -638,14 +1342,68 @@ function WorkspaceBuilder({ initialConfig, adapterConfig, integrationAdapter })
               onChange={(event) => updateSelectedWidgetConfig({ text: event.target.value })}
             />
           </label> : null}
-          {selectedWidget.kind === "view" ? <div className="workspace-settings-list">
+          {selectedWidget.kind === "view" ? <section className="workspace-field-stack">
+            <label>
+              <span>Source</span>
+              <input
+                value={selectedWidget.config?.source || ""}
+                onChange={(event) => updateSelectedWidgetConfig({ source: event.target.value })}
+              />
+            </label>
+            <label>
+              <span>Columns</span>
+              <input
+                value={serializeLineList(selectedWidget.config?.columns || [])}
+                onChange={(event) => updateSelectedWidgetConfig({ columns: parseLineList(event.target.value) })}
+              />
+            </label>
+            <label>
+              <span>Manual Rows</span>
+              <textarea
+                value={serializeManualRows(selectedWidget.config?.rows || [], selectedWidget.config?.columns || [])}
+                onChange={(event) => {
+                  const columns = selectedWidget.config?.columns?.length ? selectedWidget.config.columns : ["Name", "Domain Name"];
+                  updateSelectedWidgetConfig({
+                    rows: parseManualRows(event.target.value, columns),
+                    binding: { mode: "manual", source: "Manual rows", rows: parseManualRows(event.target.value, columns) }
+                  });
+                }}
+              />
+            </label>
+            <label>
+              <span>Static Binding</span>
+              <select
+                value={selectedWidget.config?.binding?.mode || "manual"}
+                onChange={(event) => {
+                  const binding = event.target.value === "csv" ? SAMPLE_DATA_BINDINGS.contentCsv : SAMPLE_DATA_BINDINGS.companiesManual;
+                  updateSelectedWidgetConfig({ binding });
+                }}
+              >
+                <option value="manual">Manual Rows</option>
+                <option value="csv">Sample CSV</option>
+              </select>
+            </label>
+            <div className="workspace-settings-list">
             <p className="workspace-panel-label">Settings</p>
             <div><span>Layout</span><code>{selectedWidget.config?.layout || "Table"}</code></div>
             <div><span>Source</span><code>{selectedWidget.config?.source || "Companies"}</code></div>
-            <div><span>Fields</span><code>6 shown</code></div>
+            <div><span>Fields</span><code>{selectedWidget.config?.columns?.length || 2} shown</code></div>
             <div><span>Filter</span><code>›</code></div>
             <div><span>Sort</span><code>›</code></div>
-          </div> : null}
+            </div>
+          </section> : null}
+          {selectedWidget.kind === "rich-text" ? <label>
+            <span>Static Binding</span>
+            <select
+              value={selectedWidget.config?.binding?.mode || "manual"}
+              onChange={(event) => updateSelectedWidgetConfig({
+                binding: { mode: event.target.value, source: event.target.value === "manual" ? "Manual text" : "Sample JSON", rows: [] }
+              })}
+            >
+              <option value="manual">Manual Text</option>
+              <option value="json">Sample JSON</option>
+            </select>
+          </label> : null}
           <div className="workspace-settings-list">
             <p className="workspace-panel-label">Placement</p>
             <div><span>Size</span><code>{selectedWidget.position.w} x {selectedWidget.position.h}</code></div>