@btst/stack 1.5.2 → 1.7.0

package/dist/packages/better-stack/src/plugins/form-builder/client/components/pages/form-list-page.internal.mjs

@@ -0,0 +1,163 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { usePluginOverrides, useBasePath } from '@btst/stack/context';
+import { Button } from '../../../../../../../ui/src/components/button.mjs';
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '../../../../../../../ui/src/components/table.mjs';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '../../../../../../../ui/src/components/dropdown-menu.mjs';
+import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from '../../../../../../../ui/src/components/alert-dialog.mjs';
+import { Plus, MoreHorizontal, Pencil, FileText, Trash2 } from 'lucide-react';
+import { toast } from 'sonner';
+import { useSuspenseForms, useDeleteForm } from '../../hooks/form-builder-hooks.mjs';
+import { FORM_BUILDER_LOCALIZATION } from '../../localization/index.mjs';
+import { PageWrapper } from '../shared/page-wrapper.mjs';
+import { EmptyState } from '../shared/empty-state.mjs';
+import { Pagination } from '../shared/pagination.mjs';
+
+function FormListPage() {
+  const { navigate, Link, localization } = usePluginOverrides("form-builder", {
+    localization: FORM_BUILDER_LOCALIZATION
+  });
+  const basePath = useBasePath();
+  const { forms, total, hasMore, isLoadingMore, loadMore, refetch } = useSuspenseForms();
+  const deleteMutation = useDeleteForm();
+  const [deleteId, setDeleteId] = useState(null);
+  const loc = localization || FORM_BUILDER_LOCALIZATION;
+  const LinkComponent = Link || "a";
+  const handleDelete = async () => {
+    if (!deleteId) return;
+    try {
+      await deleteMutation.mutateAsync(deleteId);
+      toast.success(loc.FORM_BUILDER_TOAST_DELETE_SUCCESS);
+      setDeleteId(null);
+      await refetch();
+    } catch (error) {
+      toast.error(loc.FORM_BUILDER_TOAST_ERROR);
+    }
+  };
+  const getStatusBadge = (status) => {
+    const colors = {
+      active: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
+      inactive: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200",
+      archived: "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200"
+    };
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `px-2 py-1 rounded-full text-xs font-medium ${colors[status] || colors.inactive}`,
+        children: status
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(PageWrapper, { testId: "form-list-page", children: [
+    /* @__PURE__ */ jsxs("div", { className: "w-full max-w-5xl space-y-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold", children: loc.FORM_BUILDER_LIST_TITLE }),
+          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: loc.FORM_BUILDER_LIST_SUBTITLE })
+        ] }),
+        /* @__PURE__ */ jsx(Button, { asChild: true, children: /* @__PURE__ */ jsxs(LinkComponent, { href: `${basePath}/forms/new`, children: [
+          /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-4 w-4" }),
+          loc.FORM_BUILDER_BUTTON_NEW_FORM
+        ] }) })
+      ] }),
+      forms.length === 0 ? /* @__PURE__ */ jsx(
+        EmptyState,
+        {
+          title: loc.FORM_BUILDER_LIST_EMPTY,
+          description: loc.FORM_BUILDER_LIST_EMPTY_DESCRIPTION,
+          action: /* @__PURE__ */ jsx(Button, { asChild: true, children: /* @__PURE__ */ jsxs(LinkComponent, { href: `${basePath}/forms/new`, children: [
+            /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-4 w-4" }),
+            loc.FORM_BUILDER_BUTTON_NEW_FORM
+          ] }) })
+        }
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "rounded-lg border", children: /* @__PURE__ */ jsxs(Table, { children: [
+          /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+            /* @__PURE__ */ jsx(TableHead, { children: loc.FORM_BUILDER_LIST_COLUMN_NAME }),
+            /* @__PURE__ */ jsx(TableHead, { children: loc.FORM_BUILDER_LIST_COLUMN_SLUG }),
+            /* @__PURE__ */ jsx(TableHead, { children: loc.FORM_BUILDER_LIST_COLUMN_STATUS }),
+            /* @__PURE__ */ jsx(TableHead, { children: loc.FORM_BUILDER_LIST_COLUMN_CREATED }),
+            /* @__PURE__ */ jsx(TableHead, { className: "w-12", children: loc.FORM_BUILDER_LIST_COLUMN_ACTIONS })
+          ] }) }),
+          /* @__PURE__ */ jsx(TableBody, { children: forms.map((form) => /* @__PURE__ */ jsxs(TableRow, { children: [
+            /* @__PURE__ */ jsx(TableCell, { className: "font-medium", children: form.name }),
+            /* @__PURE__ */ jsx(TableCell, { className: "text-muted-foreground font-mono text-sm", children: form.slug }),
+            /* @__PURE__ */ jsx(TableCell, { children: getStatusBadge(form.status) }),
+            /* @__PURE__ */ jsx(TableCell, { className: "text-muted-foreground", children: new Date(form.createdAt).toLocaleDateString() }),
+            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+              /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "icon", children: [
+                /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" }),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Actions" })
+              ] }) }),
+              /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+                /* @__PURE__ */ jsxs(
+                  DropdownMenuItem,
+                  {
+                    onClick: () => navigate?.(`${basePath}/forms/${form.id}/edit`),
+                    children: [
+                      /* @__PURE__ */ jsx(Pencil, { className: "mr-2 h-4 w-4" }),
+                      loc.FORM_BUILDER_LIST_ACTION_EDIT
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  DropdownMenuItem,
+                  {
+                    onClick: () => navigate?.(
+                      `${basePath}/forms/${form.id}/submissions`
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx(FileText, { className: "mr-2 h-4 w-4" }),
+                      loc.FORM_BUILDER_LIST_ACTION_SUBMISSIONS
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  DropdownMenuItem,
+                  {
+                    className: "text-destructive",
+                    onClick: () => setDeleteId(form.id),
+                    children: [
+                      /* @__PURE__ */ jsx(Trash2, { className: "mr-2 h-4 w-4" }),
+                      loc.FORM_BUILDER_LIST_ACTION_DELETE
+                    ]
+                  }
+                )
+              ] })
+            ] }) })
+          ] }, form.id)) })
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          Pagination,
+          {
+            total,
+            showing: forms.length,
+            hasMore,
+            isLoadingMore,
+            onLoadMore: loadMore
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(AlertDialog, { open: !!deleteId, onOpenChange: () => setDeleteId(null), children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
+      /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsx(AlertDialogTitle, { children: "Delete Form" }),
+        /* @__PURE__ */ jsx(AlertDialogDescription, { children: loc.FORM_BUILDER_EDITOR_DELETE_CONFIRM })
+      ] }),
+      /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
+        /* @__PURE__ */ jsx(AlertDialogCancel, { children: loc.FORM_BUILDER_BUTTON_CANCEL }),
+        /* @__PURE__ */ jsx(
+          AlertDialogAction,
+          {
+            onClick: handleDelete,
+            className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+            children: deleteMutation.isPending ? loc.FORM_BUILDER_STATUS_DELETING : loc.FORM_BUILDER_BUTTON_DELETE
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+
+export { FormListPage };

package/dist/packages/better-stack/src/plugins/form-builder/client/components/pages/form-list-page.mjs

@@ -0,0 +1,17 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Suspense, lazy } from 'react';
+import { FormListSkeleton } from '../loading/form-list-skeleton.mjs';
+import { ErrorBoundary } from 'react-error-boundary';
+import { DefaultError } from '../shared/default-error.mjs';
+
+const FormListPage = lazy(
+  () => import('./form-list-page.internal.mjs').then((m) => ({
+    default: m.FormListPage
+  }))
+);
+function FormListPageComponent() {
+  return /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: DefaultError, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(FormListSkeleton, {}), children: /* @__PURE__ */ jsx(FormListPage, {}) }) });
+}
+
+export { FormListPageComponent };

package/dist/packages/better-stack/src/plugins/form-builder/client/components/pages/submissions-page.cjs

@@ -0,0 +1,19 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const submissionsSkeleton = require('../loading/submissions-skeleton.cjs');
+const reactErrorBoundary = require('react-error-boundary');
+const defaultError = require('../shared/default-error.cjs');
+
+const SubmissionsPage = React.lazy(
+  () => import('./submissions-page.internal.cjs').then((m) => ({
+    default: m.SubmissionsPage
+  }))
+);
+function SubmissionsPageComponent({ formId }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactErrorBoundary.ErrorBoundary, { FallbackComponent: defaultError.DefaultError, children: /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(submissionsSkeleton.SubmissionsSkeleton, {}), children: /* @__PURE__ */ jsxRuntime.jsx(SubmissionsPage, { formId }) }) });
+}
+
+exports.SubmissionsPageComponent = SubmissionsPageComponent;

package/dist/packages/better-stack/src/plugins/form-builder/client/components/pages/submissions-page.internal.cjs

@@ -0,0 +1,177 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const context = require('@btst/stack/context');
+const button = require('../../../../../../../ui/src/components/button.cjs');
+const table = require('../../../../../../../ui/src/components/table.cjs');
+const alertDialog = require('../../../../../../../ui/src/components/alert-dialog.cjs');
+const dialog = require('../../../../../../../ui/src/components/dialog.cjs');
+const lucideReact = require('lucide-react');
+const sonner = require('sonner');
+const formBuilderHooks = require('../../hooks/form-builder-hooks.cjs');
+const index = require('../../localization/index.cjs');
+const pageWrapper = require('../shared/page-wrapper.cjs');
+const emptyState = require('../shared/empty-state.cjs');
+const pagination = require('../shared/pagination.cjs');
+
+function SubmissionsPage({ formId }) {
+  const { navigate, Link, localization } = context.usePluginOverrides("form-builder", {
+    localization: index.FORM_BUILDER_LOCALIZATION
+  });
+  const basePath = context.useBasePath();
+  const { form } = formBuilderHooks.useSuspenseFormById(formId);
+  const { submissions, total, hasMore, isLoadingMore, loadMore, refetch } = formBuilderHooks.useSuspenseSubmissions(formId);
+  const deleteMutation = formBuilderHooks.useDeleteSubmission(formId);
+  const [deleteId, setDeleteId] = React.useState(null);
+  const [viewSubmission, setViewSubmission] = React.useState(null);
+  const loc = localization || index.FORM_BUILDER_LOCALIZATION;
+  const LinkComponent = Link || "a";
+  const handleDelete = async () => {
+    if (!deleteId) return;
+    try {
+      await deleteMutation.mutateAsync(deleteId);
+      sonner.toast.success(loc.FORM_BUILDER_TOAST_SUBMISSION_DELETED);
+      setDeleteId(null);
+      await refetch();
+    } catch (error) {
+      sonner.toast.error(loc.FORM_BUILDER_TOAST_ERROR);
+    }
+  };
+  const formatSubmissionData = (data) => {
+    const entries = Object.entries(data).slice(0, 3);
+    return entries.map(([key, value]) => {
+      const strValue = typeof value === "string" ? value : JSON.stringify(value);
+      const truncated = strValue.length > 30 ? `${strValue.slice(0, 30)}...` : strValue;
+      return `${key}: ${truncated}`;
+    }).join(", ");
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(pageWrapper.PageWrapper, { testId: "submissions-page", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-5xl space-y-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "ghost", size: "icon", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(LinkComponent, { href: `${basePath}/forms`, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "h-4 w-4" }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-bold", children: form?.name || loc.FORM_BUILDER_SUBMISSIONS_TITLE }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: loc.FORM_BUILDER_SUBMISSIONS_SUBTITLE })
+        ] })
+      ] }),
+      submissions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+        emptyState.EmptyState,
+        {
+          title: loc.FORM_BUILDER_SUBMISSIONS_EMPTY,
+          description: loc.FORM_BUILDER_SUBMISSIONS_EMPTY_DESCRIPTION
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border", children: /* @__PURE__ */ jsxRuntime.jsxs(table.Table, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(table.TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(table.TableRow, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { className: "w-24", children: loc.FORM_BUILDER_SUBMISSIONS_COLUMN_ID }),
+            /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { children: loc.FORM_BUILDER_SUBMISSIONS_COLUMN_DATA }),
+            /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { children: loc.FORM_BUILDER_SUBMISSIONS_COLUMN_SUBMITTED_AT }),
+            /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { children: loc.FORM_BUILDER_SUBMISSIONS_COLUMN_IP_ADDRESS }),
+            /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { className: "w-24", children: loc.FORM_BUILDER_SUBMISSIONS_COLUMN_ACTIONS })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(table.TableBody, { children: submissions.map((sub) => /* @__PURE__ */ jsxRuntime.jsxs(table.TableRow, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(table.TableCell, { className: "font-mono text-xs", children: [
+              sub.id.slice(0, 8),
+              "..."
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { className: "max-w-xs truncate text-sm text-muted-foreground", children: formatSubmissionData(sub.parsedData) }),
+            /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { className: "text-muted-foreground", children: new Date(sub.submittedAt).toLocaleString() }),
+            /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { className: "text-muted-foreground font-mono text-xs", children: sub.ipAddress || "-" }),
+            /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                button.Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  onClick: () => setViewSubmission(sub),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "h-4 w-4" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "View" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                button.Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: "text-destructive",
+                  onClick: () => setDeleteId(sub.id),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-4 w-4" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Delete" })
+                  ]
+                }
+              )
+            ] }) })
+          ] }, sub.id)) })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          pagination.Pagination,
+          {
+            total,
+            showing: submissions.length,
+            hasMore,
+            isLoadingMore,
+            onLoadMore: loadMore
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      dialog.Dialog,
+      {
+        open: !!viewSubmission,
+        onOpenChange: () => setViewSubmission(null),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { className: "max-w-2xl max-h-[80vh] overflow-auto", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: "Submission Details" }) }),
+          viewSubmission && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4 text-sm", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "ID:" }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-mono truncate", children: viewSubmission.id })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Submitted:" }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate", children: new Date(viewSubmission.submittedAt).toLocaleString() })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "IP Address:" }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-mono truncate", children: viewSubmission.ipAddress || "-" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "User Agent:" }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs truncate", children: viewSubmission.userAgent || "-" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground text-sm", children: "Data:" }),
+              /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "mt-2 p-4 bg-muted rounded-lg text-sm overflow-auto", children: JSON.stringify(viewSubmission.parsedData, null, 2) })
+            ] })
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialog, { open: !!deleteId, onOpenChange: () => setDeleteId(null), children: /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogContent, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogTitle, { children: "Delete Submission" }),
+        /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogDescription, { children: loc.FORM_BUILDER_SUBMISSIONS_DELETE_CONFIRM })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogFooter, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogCancel, { children: loc.FORM_BUILDER_BUTTON_CANCEL }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          alertDialog.AlertDialogAction,
+          {
+            onClick: handleDelete,
+            className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+            children: deleteMutation.isPending ? loc.FORM_BUILDER_STATUS_DELETING : loc.FORM_BUILDER_BUTTON_DELETE
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+
+exports.SubmissionsPage = SubmissionsPage;

package/dist/packages/better-stack/src/plugins/form-builder/client/components/pages/submissions-page.internal.mjs

@@ -0,0 +1,175 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { usePluginOverrides, useBasePath } from '@btst/stack/context';
+import { Button } from '../../../../../../../ui/src/components/button.mjs';
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '../../../../../../../ui/src/components/table.mjs';
+import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from '../../../../../../../ui/src/components/alert-dialog.mjs';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../../../../../../ui/src/components/dialog.mjs';
+import { ArrowLeft, Eye, Trash2 } from 'lucide-react';
+import { toast } from 'sonner';
+import { useSuspenseFormById, useSuspenseSubmissions, useDeleteSubmission } from '../../hooks/form-builder-hooks.mjs';
+import { FORM_BUILDER_LOCALIZATION } from '../../localization/index.mjs';
+import { PageWrapper } from '../shared/page-wrapper.mjs';
+import { EmptyState } from '../shared/empty-state.mjs';
+import { Pagination } from '../shared/pagination.mjs';
+
+function SubmissionsPage({ formId }) {
+  const { navigate, Link, localization } = usePluginOverrides("form-builder", {
+    localization: FORM_BUILDER_LOCALIZATION
+  });
+  const basePath = useBasePath();
+  const { form } = useSuspenseFormById(formId);
+  const { submissions, total, hasMore, isLoadingMore, loadMore, refetch } = useSuspenseSubmissions(formId);
+  const deleteMutation = useDeleteSubmission(formId);
+  const [deleteId, setDeleteId] = useState(null);
+  const [viewSubmission, setViewSubmission] = useState(null);
+  const loc = localization || FORM_BUILDER_LOCALIZATION;
+  const LinkComponent = Link || "a";
+  const handleDelete = async () => {
+    if (!deleteId) return;
+    try {
+      await deleteMutation.mutateAsync(deleteId);
+      toast.success(loc.FORM_BUILDER_TOAST_SUBMISSION_DELETED);
+      setDeleteId(null);
+      await refetch();
+    } catch (error) {
+      toast.error(loc.FORM_BUILDER_TOAST_ERROR);
+    }
+  };
+  const formatSubmissionData = (data) => {
+    const entries = Object.entries(data).slice(0, 3);
+    return entries.map(([key, value]) => {
+      const strValue = typeof value === "string" ? value : JSON.stringify(value);
+      const truncated = strValue.length > 30 ? `${strValue.slice(0, 30)}...` : strValue;
+      return `${key}: ${truncated}`;
+    }).join(", ");
+  };
+  return /* @__PURE__ */ jsxs(PageWrapper, { testId: "submissions-page", children: [
+    /* @__PURE__ */ jsxs("div", { className: "w-full max-w-5xl space-y-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", asChild: true, children: /* @__PURE__ */ jsx(LinkComponent, { href: `${basePath}/forms`, children: /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" }) }) }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold", children: form?.name || loc.FORM_BUILDER_SUBMISSIONS_TITLE }),
+          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: loc.FORM_BUILDER_SUBMISSIONS_SUBTITLE })
+        ] })
+      ] }),
+      submissions.length === 0 ? /* @__PURE__ */ jsx(
+        EmptyState,
+        {
+          title: loc.FORM_BUILDER_SUBMISSIONS_EMPTY,
+          description: loc.FORM_BUILDER_SUBMISSIONS_EMPTY_DESCRIPTION
+        }
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "rounded-lg border", children: /* @__PURE__ */ jsxs(Table, { children: [
+          /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+            /* @__PURE__ */ jsx(TableHead, { className: "w-24", children: loc.FORM_BUILDER_SUBMISSIONS_COLUMN_ID }),
+            /* @__PURE__ */ jsx(TableHead, { children: loc.FORM_BUILDER_SUBMISSIONS_COLUMN_DATA }),
+            /* @__PURE__ */ jsx(TableHead, { children: loc.FORM_BUILDER_SUBMISSIONS_COLUMN_SUBMITTED_AT }),
+            /* @__PURE__ */ jsx(TableHead, { children: loc.FORM_BUILDER_SUBMISSIONS_COLUMN_IP_ADDRESS }),
+            /* @__PURE__ */ jsx(TableHead, { className: "w-24", children: loc.FORM_BUILDER_SUBMISSIONS_COLUMN_ACTIONS })
+          ] }) }),
+          /* @__PURE__ */ jsx(TableBody, { children: submissions.map((sub) => /* @__PURE__ */ jsxs(TableRow, { children: [
+            /* @__PURE__ */ jsxs(TableCell, { className: "font-mono text-xs", children: [
+              sub.id.slice(0, 8),
+              "..."
+            ] }),
+            /* @__PURE__ */ jsx(TableCell, { className: "max-w-xs truncate text-sm text-muted-foreground", children: formatSubmissionData(sub.parsedData) }),
+            /* @__PURE__ */ jsx(TableCell, { className: "text-muted-foreground", children: new Date(sub.submittedAt).toLocaleString() }),
+            /* @__PURE__ */ jsx(TableCell, { className: "text-muted-foreground font-mono text-xs", children: sub.ipAddress || "-" }),
+            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  onClick: () => setViewSubmission(sub),
+                  children: [
+                    /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" }),
+                    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "View" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: "text-destructive",
+                  onClick: () => setDeleteId(sub.id),
+                  children: [
+                    /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" }),
+                    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Delete" })
+                  ]
+                }
+              )
+            ] }) })
+          ] }, sub.id)) })
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          Pagination,
+          {
+            total,
+            showing: submissions.length,
+            hasMore,
+            isLoadingMore,
+            onLoadMore: loadMore
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open: !!viewSubmission,
+        onOpenChange: () => setViewSubmission(null),
+        children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-2xl max-h-[80vh] overflow-auto", children: [
+          /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "Submission Details" }) }),
+          viewSubmission && /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4 text-sm", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "ID:" }),
+                /* @__PURE__ */ jsx("p", { className: "font-mono truncate", children: viewSubmission.id })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Submitted:" }),
+                /* @__PURE__ */ jsx("p", { className: "truncate", children: new Date(viewSubmission.submittedAt).toLocaleString() })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "IP Address:" }),
+                /* @__PURE__ */ jsx("p", { className: "font-mono truncate", children: viewSubmission.ipAddress || "-" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "User Agent:" }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs truncate", children: viewSubmission.userAgent || "-" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: "Data:" }),
+              /* @__PURE__ */ jsx("pre", { className: "mt-2 p-4 bg-muted rounded-lg text-sm overflow-auto", children: JSON.stringify(viewSubmission.parsedData, null, 2) })
+            ] })
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(AlertDialog, { open: !!deleteId, onOpenChange: () => setDeleteId(null), children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
+      /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsx(AlertDialogTitle, { children: "Delete Submission" }),
+        /* @__PURE__ */ jsx(AlertDialogDescription, { children: loc.FORM_BUILDER_SUBMISSIONS_DELETE_CONFIRM })
+      ] }),
+      /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
+        /* @__PURE__ */ jsx(AlertDialogCancel, { children: loc.FORM_BUILDER_BUTTON_CANCEL }),
+        /* @__PURE__ */ jsx(
+          AlertDialogAction,
+          {
+            onClick: handleDelete,
+            className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+            children: deleteMutation.isPending ? loc.FORM_BUILDER_STATUS_DELETING : loc.FORM_BUILDER_BUTTON_DELETE
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+
+export { SubmissionsPage };

package/dist/packages/better-stack/src/plugins/form-builder/client/components/pages/submissions-page.mjs

@@ -0,0 +1,17 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Suspense, lazy } from 'react';
+import { SubmissionsSkeleton } from '../loading/submissions-skeleton.mjs';
+import { ErrorBoundary } from 'react-error-boundary';
+import { DefaultError } from '../shared/default-error.mjs';
+
+const SubmissionsPage = lazy(
+  () => import('./submissions-page.internal.mjs').then((m) => ({
+    default: m.SubmissionsPage
+  }))
+);
+function SubmissionsPageComponent({ formId }) {
+  return /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: DefaultError, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(SubmissionsSkeleton, {}), children: /* @__PURE__ */ jsx(SubmissionsPage, { formId }) }) });
+}
+
+export { SubmissionsPageComponent };

package/dist/packages/better-stack/src/plugins/form-builder/client/components/shared/default-error.cjs

@@ -0,0 +1,17 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const button = require('../../../../../../../ui/src/components/button.cjs');
+
+function DefaultError({ error, resetErrorBoundary }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-full bg-destructive/10 p-4 mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-8 w-8 text-destructive" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-medium text-foreground mb-2", children: "Something went wrong" }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mb-4 max-w-sm", children: error.message || "An unexpected error occurred" }),
+    resetErrorBoundary && /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "outline", onClick: resetErrorBoundary, children: "Try again" })
+  ] });
+}
+
+exports.DefaultError = DefaultError;

package/dist/packages/better-stack/src/plugins/form-builder/client/components/shared/default-error.mjs

@@ -0,0 +1,15 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { AlertCircle } from 'lucide-react';
+import { Button } from '../../../../../../../ui/src/components/button.mjs';
+
+function DefaultError({ error, resetErrorBoundary }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "rounded-full bg-destructive/10 p-4 mb-4", children: /* @__PURE__ */ jsx(AlertCircle, { className: "h-8 w-8 text-destructive" }) }),
+    /* @__PURE__ */ jsx("h3", { className: "text-lg font-medium text-foreground mb-2", children: "Something went wrong" }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-4 max-w-sm", children: error.message || "An unexpected error occurred" }),
+    resetErrorBoundary && /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: resetErrorBoundary, children: "Try again" })
+  ] });
+}
+
+export { DefaultError };

package/dist/packages/better-stack/src/plugins/form-builder/client/components/shared/empty-state.cjs

@@ -0,0 +1,16 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+
+function EmptyState({ title, description, action }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-full bg-muted p-4 mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Inbox, { className: "h-8 w-8 text-muted-foreground" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-medium text-foreground mb-2", children: title }),
+    description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mb-4 max-w-sm", children: description }),
+    action
+  ] });
+}
+
+exports.EmptyState = EmptyState;

package/dist/packages/better-stack/src/plugins/form-builder/client/components/shared/empty-state.mjs

@@ -0,0 +1,14 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Inbox } from 'lucide-react';
+
+function EmptyState({ title, description, action }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "rounded-full bg-muted p-4 mb-4", children: /* @__PURE__ */ jsx(Inbox, { className: "h-8 w-8 text-muted-foreground" }) }),
+    /* @__PURE__ */ jsx("h3", { className: "text-lg font-medium text-foreground mb-2", children: title }),
+    description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-4 max-w-sm", children: description }),
+    action
+  ] });
+}
+
+export { EmptyState };