@burdenoff/fluidgrids-fe-sdk 2026.1007.1 → 2026.1007.2

package/dist/index.js

@@ -46,10 +46,10 @@ import { Icon } from '@iconify/react';
 import { ErrorBoundary } from '@burdenoff/fe-libs/shared/components';
 import '@xyflow/react/dist/style.css';
 import { Button } from '@burdenoff/fe-libs/button';
-import { Tabs, TabsList, TabsTrigger, TabsContent, Card, CardContent, CardHeader, CardTitle, Badge, Input, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Label, Switch, CardDescription, Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Textarea } from '@burdenoff/fe-libs/ui';
+import { Tabs, TabsList, TabsTrigger, TabsContent, Card, CardContent, PagePurpose, NextSteps, CardHeader, CardTitle, Badge, Input, IllustratedEmptyState, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Label, Switch, CardDescription, Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Textarea } from '@burdenoff/fe-libs/ui';
 import { toast } from 'sonner';
 import { gql } from '@apollo/client';
-import { ChevronRight, Check, Circle, Database, ArrowLeft, Plus, Search, Table2, RefreshCw, Pencil, Trash2, ChevronDown, ChevronUp, ArrowUpFromLine, ArrowDownToLine } from 'lucide-react';
+import { ChevronRight, Check, Circle, Database, ArrowLeft, Plus, Table2, RefreshCw, Search, Pencil, Trash2, ChevronDown, ChevronUp, ArrowUpFromLine, ArrowDownToLine } from 'lucide-react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
@@ -2806,10 +2806,16 @@ function DataTablesPage() {
             tr("fluidgrids.dataTables.workflowData", "Workflow data")
           ] }),
           /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold text-text-primary sm:text-3xl", children: tr("fluidgrids.dataTables.pageTitle", "Data Tables") }),
-          /* @__PURE__ */ jsx("p", { className: "mt-1 max-w-2xl text-text-secondary", children: tr(
-            "fluidgrids.dataTables.pageSubtitle",
-            "Store structured workspace data that your workflows can read and write across runs."
-          ) })
+          /* @__PURE__ */ jsx(
+            PagePurpose,
+            {
+              icon: /* @__PURE__ */ jsx(Database, { className: "size-4", "aria-hidden": "true" }),
+              children: tr(
+                "fluidgrids.dataTables.pageSubtitle",
+                "Use Data Tables as lightweight persistent storage for workflow state, lookups, and records shared across runs."
+              )
+            }
+          )
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
           /* @__PURE__ */ jsxs(Button, { variant: "outline", onClick: () => navigate("../list"), children: [
@@ -2831,6 +2837,59 @@ function DataTablesPage() {
           )
         ] })
       ] }),
+      /* @__PURE__ */ jsx(
+        NextSteps,
+        {
+          storageKey: "data-tables",
+          title: tr(
+            "fluidgrids.dataTables.nextStepsTitle",
+            "How to use Data Tables"
+          ),
+          steps: [
+            {
+              id: "create",
+              label: tr(
+                "fluidgrids.dataTables.nextStepCreateLabel",
+                "Create a table"
+              ),
+              description: tr(
+                "fluidgrids.dataTables.nextStepCreateDescription",
+                "Define typed columns for the records your workflow needs."
+              ),
+              icon: /* @__PURE__ */ jsx(Plus, { className: "size-4", "aria-hidden": "true" }),
+              onClick: () => {
+                setEditingTable(null);
+                setTableDialogOpen(true);
+              }
+            },
+            {
+              id: "connect",
+              label: tr(
+                "fluidgrids.dataTables.nextStepConnectLabel",
+                "Connect it to a workflow"
+              ),
+              description: tr(
+                "fluidgrids.dataTables.nextStepConnectDescription",
+                "Add a Data Table node to get, insert, update, upsert, or delete rows."
+              ),
+              icon: /* @__PURE__ */ jsx(Table2, { className: "size-4", "aria-hidden": "true" }),
+              onClick: () => navigate("../list")
+            },
+            {
+              id: "reuse",
+              label: tr(
+                "fluidgrids.dataTables.nextStepReuseLabel",
+                "Reuse data across runs"
+              ),
+              description: tr(
+                "fluidgrids.dataTables.nextStepReuseDescription",
+                "Use saved status, cursors, lookups, and deduplication keys on later runs."
+              ),
+              icon: /* @__PURE__ */ jsx(RefreshCw, { className: "size-4", "aria-hidden": "true" })
+            }
+          ]
+        }
+      ),
       /* @__PURE__ */ jsxs("div", { className: "grid gap-5 lg:grid-cols-[minmax(16rem,22rem)_minmax(0,1fr)]", children: [
         /* @__PURE__ */ jsxs(Card, { className: "h-fit border-border-secondary", children: [
           /* @__PURE__ */ jsxs(CardHeader, { className: "gap-3 border-b border-border-secondary p-4", children: [
@@ -2869,13 +2928,38 @@ function DataTablesPage() {
           ] }),
           /* @__PURE__ */ jsxs(CardContent, { className: "p-2", children: [
             loading && /* @__PURE__ */ jsx("p", { className: "p-4 text-sm text-text-secondary", children: tr("fluidgrids.dataTables.loading", "Loading tables\u2026") }),
-            !loading && tables.length === 0 && /* @__PURE__ */ jsxs("div", { className: "p-4 text-sm text-text-secondary", children: [
-              /* @__PURE__ */ jsx("p", { children: tr("fluidgrids.dataTables.empty", "No data tables yet") }),
-              /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs", children: tr(
-                "fluidgrids.dataTables.emptyHint",
-                "Create a table to give your workflows a shared data store."
-              ) })
-            ] }),
+            !loading && tables.length === 0 && /* @__PURE__ */ jsx(
+              IllustratedEmptyState,
+              {
+                className: "py-8",
+                illustration: "onboarding",
+                title: tr(
+                  "fluidgrids.dataTables.empty",
+                  "Create your first Data Table"
+                ),
+                description: tr(
+                  "fluidgrids.dataTables.emptyHint",
+                  "Give your workflows a shared place to store typed records across runs."
+                ),
+                action: /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    size: "sm",
+                    onClick: () => {
+                      setEditingTable(null);
+                      setTableDialogOpen(true);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(Plus, { className: "mr-2 size-4", "aria-hidden": "true" }),
+                      tr(
+                        "fluidgrids.dataTables.createFirstTable",
+                        "Create a table"
+                      )
+                    ]
+                  }
+                )
+              }
+            ),
             !loading && tables.map((table) => /* @__PURE__ */ jsxs(
               "button",
               {