@btst/plugin-form-builder 0.0.0-stage → 1.0.0

package/dist/client/components/pages/form-list-page.internal.mjs

@@ -0,0 +1,280 @@
+'use client';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { useTranslate, useNotify, usePluginOverrides, usePluginSiteNavigation, PermissionAccess } from '@btst/stack/context';
+import { useListState } from '@btst/stack/client/hooks';
+import { Button } from '../../../ui/src/components/button.mjs';
+import { Input } from '../../../ui/src/components/input.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, Search, Loader2, MoreHorizontal, Pencil, FileText, Trash2 } from 'lucide-react';
+import { PageWrapper } from '../shared/page-wrapper.mjs';
+import { EmptyState } from '../shared/empty-state.mjs';
+import { Pagination } from '../shared/pagination.mjs';
+import { formBuilderPermissions } from '../../../permissions.mjs';
+import { FORM_BUILDER_PLUGIN_ID } from '../../constants.mjs';
+import { cn } from '../../../utils.mjs';
+import { useSuspenseForms, useForms, useDeleteForm } from '../../hooks/form-builder-hooks.mjs';
+
+const LIST_STATE_SCHEMA = {
+  q: { type: "string", default: "", history: "replace" }
+};
+const SEARCH_DEBOUNCE_MS = 300;
+function FormListPage() {
+  const t = useTranslate();
+  const notify = useNotify();
+  const { localization, classNames } = usePluginOverrides(FORM_BUILDER_PLUGIN_ID);
+  const { Link, navigate, resolve } = usePluginSiteNavigation(
+    FORM_BUILDER_PLUGIN_ID
+  );
+  const [{ q: search }, setListState] = useListState(
+    "form-builder-forms",
+    LIST_STATE_SCHEMA
+  );
+  const [searchInput, setSearchInput] = useState(search);
+  const lastSyncedSearch = useRef(search);
+  useEffect(() => {
+    if (search !== lastSyncedSearch.current) {
+      lastSyncedSearch.current = search;
+      setSearchInput(search);
+    }
+  }, [search]);
+  useEffect(() => {
+    if (searchInput === search) return;
+    const timeout = setTimeout(() => {
+      lastSyncedSearch.current = searchInput;
+      setListState({ q: searchInput });
+    }, SEARCH_DEBOUNCE_MS);
+    return () => clearTimeout(timeout);
+  }, [searchInput, search, setListState]);
+  const hasSearch = search.trim().length > 0;
+  const defaultList = useSuspenseForms();
+  const searchedList = useForms({ search, enabled: hasSearch });
+  const activeList = hasSearch ? searchedList : defaultList;
+  const { forms, total, hasMore, isLoadingMore, loadMore } = activeList;
+  const isSearchLoading = hasSearch && searchedList.isLoading;
+  const deleteMutation = useDeleteForm();
+  const [deleteId, setDeleteId] = useState(null);
+  const LinkComponent = Link || "a";
+  const handleDelete = async () => {
+    if (!deleteId) return;
+    try {
+      await deleteMutation.mutateAsync(deleteId);
+    } catch {
+      notify.error(
+        localization?.FORM_BUILDER_TOAST_ERROR ?? t("formBuilder.toasts.error", "An error occurred. Please try again.")
+      );
+      return;
+    }
+    notify.success(
+      localization?.FORM_BUILDER_TOAST_DELETE_SUCCESS ?? t("formBuilder.toasts.deleteSuccess", "Form deleted successfully")
+    );
+    setDeleteId(null);
+  };
+  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
+      }
+    );
+  };
+  const newFormButton = /* @__PURE__ */ jsx(PermissionAccess, { permission: formBuilderPermissions.form.create(), children: /* @__PURE__ */ jsx(Button, { asChild: true, children: /* @__PURE__ */ jsxs(LinkComponent, { href: resolve("forms", "new").href, children: [
+    /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-4 w-4" }),
+    localization?.FORM_BUILDER_BUTTON_NEW_FORM ?? t("formBuilder.common.buttonNewForm", "New Form")
+  ] }) }) });
+  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: localization?.FORM_BUILDER_LIST_TITLE ?? t("formBuilder.list.title", "Forms") }),
+          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: localization?.FORM_BUILDER_LIST_SUBTITLE ?? t("formBuilder.list.subtitle", "Manage your forms") })
+        ] }),
+        newFormButton
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "relative max-w-sm", children: [
+        /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            "data-testid": "form-builder-list-search",
+            value: searchInput,
+            onChange: (e) => setSearchInput(e.target.value),
+            placeholder: localization?.FORM_BUILDER_LIST_SEARCH_PLACEHOLDER ?? t("formBuilder.list.searchPlaceholder", "Search forms..."),
+            className: "pl-9"
+          }
+        ),
+        isSearchLoading && /* @__PURE__ */ jsx(Loader2, { className: "absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 animate-spin text-muted-foreground" })
+      ] }),
+      forms.length === 0 ? isSearchLoading ? null : hasSearch ? /* @__PURE__ */ jsx(
+        EmptyState,
+        {
+          title: localization?.FORM_BUILDER_LIST_SEARCH_EMPTY ?? t("formBuilder.list.searchEmpty", "No forms match your search"),
+          description: localization?.FORM_BUILDER_LIST_SEARCH_EMPTY_DESCRIPTION ?? t(
+            "formBuilder.list.searchEmptyDescription",
+            "Try a different search term."
+          )
+        }
+      ) : /* @__PURE__ */ jsx(
+        EmptyState,
+        {
+          title: localization?.FORM_BUILDER_LIST_EMPTY ?? t("formBuilder.list.empty", "No forms yet"),
+          description: localization?.FORM_BUILDER_LIST_EMPTY_DESCRIPTION ?? t(
+            "formBuilder.list.emptyDescription",
+            "Create your first form to get started."
+          ),
+          action: newFormButton
+        }
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("rounded-lg border", classNames?.table),
+            "data-testid": "form-builder-list-table",
+            children: /* @__PURE__ */ jsxs(Table, { children: [
+              /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+                /* @__PURE__ */ jsx(TableHead, { children: localization?.FORM_BUILDER_LIST_COLUMN_NAME ?? t("formBuilder.list.columnName", "Name") }),
+                /* @__PURE__ */ jsx(TableHead, { children: localization?.FORM_BUILDER_LIST_COLUMN_SLUG ?? t("formBuilder.list.columnSlug", "Slug") }),
+                /* @__PURE__ */ jsx(TableHead, { children: localization?.FORM_BUILDER_LIST_COLUMN_STATUS ?? t("formBuilder.list.columnStatus", "Status") }),
+                /* @__PURE__ */ jsx(TableHead, { children: localization?.FORM_BUILDER_LIST_COLUMN_CREATED ?? t("formBuilder.list.columnCreated", "Created") }),
+                /* @__PURE__ */ jsx(TableHead, { className: "w-12", children: localization?.FORM_BUILDER_LIST_COLUMN_ACTIONS ?? t("formBuilder.list.columnActions", "Actions") })
+              ] }) }),
+              /* @__PURE__ */ jsx(TableBody, { children: forms.map((form) => /* @__PURE__ */ jsxs(TableRow, { className: classNames?.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: localization?.FORM_BUILDER_LIST_COLUMN_ACTIONS ?? t(
+                      "formBuilder.list.columnActions",
+                      "Actions"
+                    ) })
+                  ] }) }),
+                  /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+                    /* @__PURE__ */ jsx(
+                      PermissionAccess,
+                      {
+                        permission: formBuilderPermissions.form.update({
+                          formId: form.id,
+                          ...form.createdBy ? { ownerId: form.createdBy } : {},
+                          status: form.status
+                        }),
+                        children: /* @__PURE__ */ jsxs(
+                          DropdownMenuItem,
+                          {
+                            onClick: () => navigate("forms", form.id, "edit"),
+                            children: [
+                              /* @__PURE__ */ jsx(Pencil, { className: "mr-2 h-4 w-4" }),
+                              localization?.FORM_BUILDER_LIST_ACTION_EDIT ?? t("formBuilder.list.actionEdit", "Edit")
+                            ]
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      PermissionAccess,
+                      {
+                        permission: formBuilderPermissions.submission.read(
+                          {
+                            scope: "collection",
+                            formId: form.id,
+                            formExists: true,
+                            ...form.createdBy ? { ownerId: form.createdBy } : {}
+                          }
+                        ),
+                        children: /* @__PURE__ */ jsxs(
+                          DropdownMenuItem,
+                          {
+                            onClick: () => navigate("forms", form.id, "submissions"),
+                            children: [
+                              /* @__PURE__ */ jsx(FileText, { className: "mr-2 h-4 w-4" }),
+                              localization?.FORM_BUILDER_LIST_ACTION_SUBMISSIONS ?? t(
+                                "formBuilder.list.actionSubmissions",
+                                "Submissions"
+                              )
+                            ]
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      PermissionAccess,
+                      {
+                        permission: formBuilderPermissions.form.delete({
+                          formId: form.id,
+                          ...form.createdBy ? { ownerId: form.createdBy } : {},
+                          status: form.status
+                        }),
+                        children: /* @__PURE__ */ jsxs(
+                          DropdownMenuItem,
+                          {
+                            className: "text-destructive",
+                            onClick: () => setDeleteId(form.id),
+                            children: [
+                              /* @__PURE__ */ jsx(Trash2, { className: "mr-2 h-4 w-4" }),
+                              localization?.FORM_BUILDER_LIST_ACTION_DELETE ?? t("formBuilder.list.actionDelete", "Delete")
+                            ]
+                          }
+                        )
+                      }
+                    )
+                  ] })
+                ] }) })
+              ] }, form.id)) })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Pagination,
+          {
+            total,
+            showing: forms.length,
+            hasMore,
+            isLoadingMore,
+            onLoadMore: loadMore,
+            className: classNames?.pagination,
+            labels: {
+              showing: localization?.FORM_BUILDER_LIST_PAGINATION_SHOWING ?? t(
+                "formBuilder.list.paginationShowing",
+                "Showing {count} of {total}"
+              ),
+              next: localization?.FORM_BUILDER_LIST_PAGINATION_NEXT ?? t("formBuilder.list.paginationNext", "Load More"),
+              loading: localization?.FORM_BUILDER_STATUS_LOADING ?? t("formBuilder.common.statusLoading", "Loading...")
+            }
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(AlertDialog, { open: !!deleteId, onOpenChange: () => setDeleteId(null), children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
+      /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsx(AlertDialogTitle, { children: localization?.FORM_BUILDER_LIST_DELETE_TITLE ?? t("formBuilder.list.deleteTitle", "Delete Form") }),
+        /* @__PURE__ */ jsx(AlertDialogDescription, { children: localization?.FORM_BUILDER_EDITOR_DELETE_CONFIRM ?? t(
+          "formBuilder.editor.deleteConfirm",
+          "Are you sure you want to delete this form? All submissions will also be deleted."
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
+        /* @__PURE__ */ jsx(AlertDialogCancel, { children: localization?.FORM_BUILDER_BUTTON_CANCEL ?? t("formBuilder.common.buttonCancel", "Cancel") }),
+        /* @__PURE__ */ jsx(
+          AlertDialogAction,
+          {
+            onClick: handleDelete,
+            className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+            children: deleteMutation.isPending ? localization?.FORM_BUILDER_STATUS_DELETING ?? t("formBuilder.common.statusDeleting", "Deleting...") : localization?.FORM_BUILDER_BUTTON_DELETE ?? t("formBuilder.common.buttonDelete", "Delete")
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+
+export { FormListPage };

package/dist/client/components/pages/form-list-page.mjs

@@ -0,0 +1,42 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { lazy } from 'react';
+import { usePluginOverrides } from '@btst/stack/context';
+import { ComposedRoute } from '@btst/stack/client/components';
+import { DefaultError } from '../shared/default-error.mjs';
+import { FormListSkeleton } from '../loading/form-list-skeleton.mjs';
+import { NotFoundPage } from './404-page.mjs';
+import { formBuilderPermissions } from '../../../permissions.mjs';
+import { FORM_BUILDER_PLUGIN_ID } from '../../constants.mjs';
+
+const FormListPage = lazy(
+  () => import('./form-list-page.internal.mjs').then((m) => ({
+    default: m.FormListPage
+  }))
+);
+function FormListPageComponent() {
+  const { onRouteError } = usePluginOverrides(
+    FORM_BUILDER_PLUGIN_ID
+  );
+  return /* @__PURE__ */ jsx(
+    ComposedRoute,
+    {
+      path: "/forms",
+      permission: formBuilderPermissions.form.read({ scope: "collection" }),
+      PageComponent: FormListPage,
+      ErrorComponent: DefaultError,
+      LoadingComponent: FormListSkeleton,
+      NotFoundComponent: NotFoundPage,
+      onError: (error) => {
+        if (onRouteError) {
+          onRouteError("formList", error, {
+            path: "/forms",
+            isSSR: typeof window === "undefined"
+          });
+        }
+      }
+    }
+  );
+}
+
+export { FormListPageComponent };

package/dist/client/components/pages/submissions-page.cjs

@@ -0,0 +1,64 @@
+'use client';
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const context = require('@btst/stack/context');
+const components = require('@btst/stack/client/components');
+const defaultError = require('../shared/default-error.cjs');
+const submissionsSkeleton = require('../loading/submissions-skeleton.cjs');
+const _404Page = require('./404-page.cjs');
+const permissions = require('../../../permissions.cjs');
+const constants = require('../../constants.cjs');
+const formBuilderHooks = require('../../hooks/form-builder-hooks.cjs');
+
+const SubmissionsPage = React.lazy(
+  () => import('./submissions-page.internal.cjs').then((m) => ({
+    default: m.SubmissionsPage
+  }))
+);
+function SubmissionsPageComponent({ formId }) {
+  const { onRouteError } = context.usePluginOverrides(
+    constants.FORM_BUILDER_PLUGIN_ID
+  );
+  const path = `/forms/${formId}/submissions`;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components.ComposedRoute,
+    {
+      path,
+      PageComponent: AuthorizedSubmissionsPage,
+      ErrorComponent: defaultError.DefaultError,
+      LoadingComponent: submissionsSkeleton.SubmissionsSkeleton,
+      NotFoundComponent: _404Page.NotFoundPage,
+      props: { formId },
+      onError: (error) => {
+        if (onRouteError) {
+          onRouteError("submissions", error, {
+            path,
+            params: { formId },
+            isSSR: typeof window === "undefined"
+          });
+        }
+      }
+    }
+  );
+}
+function AuthorizedSubmissionsPage({ formId }) {
+  const { form } = formBuilderHooks.useSuspenseSubmissions(formId);
+  if (!form) return /* @__PURE__ */ jsxRuntime.jsx(_404Page.NotFoundPage, {});
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components.PermissionRouteAccess,
+    {
+      permission: permissions.formBuilderPermissions.submission.read({
+        scope: "collection",
+        formId,
+        formExists: form !== null,
+        ...form?.createdBy ? { ownerId: form.createdBy } : {}
+      }),
+      LoadingComponent: submissionsSkeleton.SubmissionsSkeleton,
+      children: /* @__PURE__ */ jsxRuntime.jsx(SubmissionsPage, { formId })
+    }
+  );
+}
+
+exports.SubmissionsPageComponent = SubmissionsPageComponent;

package/dist/client/components/pages/submissions-page.internal.cjs

@@ -0,0 +1,255 @@
+'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 pageWrapper = require('../shared/page-wrapper.cjs');
+const emptyState = require('../shared/empty-state.cjs');
+const pagination = require('../shared/pagination.cjs');
+const permissions = require('../../../permissions.cjs');
+const constants = require('../../constants.cjs');
+const utils = require('../../../utils.cjs');
+const formBuilderHooks = require('../../hooks/form-builder-hooks.cjs');
+
+function SubmissionsPage({ formId }) {
+  const t = context.useTranslate();
+  const notify = context.useNotify();
+  const { localization, classNames } = context.usePluginOverrides(constants.FORM_BUILDER_PLUGIN_ID);
+  const { identity } = context.useIdentity();
+  const { Link: LinkComponent, resolve } = context.usePluginSiteNavigation(
+    constants.FORM_BUILDER_PLUGIN_ID
+  );
+  const { form, submissions, total, hasMore, isLoadingMore, loadMore } = formBuilderHooks.useSuspenseSubmissions(formId);
+  const deleteMutation = formBuilderHooks.useDeleteSubmission(formId);
+  const [deleteId, setDeleteId] = React.useState(null);
+  const [viewSubmissionId, setViewSubmissionId] = React.useState(null);
+  const {
+    submission: viewSubmission,
+    isLoading: isViewLoading,
+    error: viewError
+  } = formBuilderHooks.useSubmission(formId, viewSubmissionId ?? void 0);
+  React.useEffect(() => {
+    setViewSubmissionId(null);
+  }, [identity]);
+  const handleDelete = async () => {
+    if (!deleteId) return;
+    try {
+      await deleteMutation.mutateAsync(deleteId);
+    } catch {
+      notify.error(
+        localization?.FORM_BUILDER_TOAST_ERROR ?? t("formBuilder.toasts.error", "An error occurred. Please try again.")
+      );
+      return;
+    }
+    notify.success(
+      localization?.FORM_BUILDER_TOAST_SUBMISSION_DELETED ?? t(
+        "formBuilder.toasts.submissionDeleted",
+        "Submission deleted successfully"
+      )
+    );
+    setDeleteId(null);
+  };
+  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: resolve("forms").href, 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 || (localization?.FORM_BUILDER_SUBMISSIONS_TITLE ?? t("formBuilder.submissions.title", "Submissions")) }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: localization?.FORM_BUILDER_SUBMISSIONS_SUBTITLE ?? t("formBuilder.submissions.subtitle", "View form submissions") })
+        ] })
+      ] }),
+      submissions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+        emptyState.EmptyState,
+        {
+          title: localization?.FORM_BUILDER_SUBMISSIONS_EMPTY ?? t("formBuilder.submissions.empty", "No submissions yet"),
+          description: localization?.FORM_BUILDER_SUBMISSIONS_EMPTY_DESCRIPTION ?? t(
+            "formBuilder.submissions.emptyDescription",
+            "Submissions will appear here when users submit this form."
+          )
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: utils.cn("rounded-lg border", classNames?.table),
+            "data-testid": "form-builder-submissions-table",
+            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: localization?.FORM_BUILDER_SUBMISSIONS_COLUMN_ID ?? t("formBuilder.submissions.columnId", "ID") }),
+                /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { children: localization?.FORM_BUILDER_SUBMISSIONS_COLUMN_SUBMITTED_AT ?? t(
+                  "formBuilder.submissions.columnSubmittedAt",
+                  "Submitted"
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { className: "w-24", children: localization?.FORM_BUILDER_SUBMISSIONS_COLUMN_ACTIONS ?? t("formBuilder.submissions.columnActions", "Actions") })
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(table.TableBody, { children: submissions.map((sub) => /* @__PURE__ */ jsxRuntime.jsxs(table.TableRow, { className: classNames?.tableRow, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(table.TableCell, { className: "font-mono text-xs", children: [
+                  sub.id.slice(0, 8),
+                  "..."
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { className: "text-muted-foreground", children: new Date(sub.submittedAt).toLocaleString() }),
+                /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    context.PermissionAccess,
+                    {
+                      permission: permissions.formBuilderPermissions.submission.read({
+                        scope: "record",
+                        formId,
+                        submissionId: sub.id,
+                        exists: true,
+                        ...form?.createdBy ? { ownerId: form.createdBy } : {},
+                        ...sub.submittedBy ? { submittedBy: sub.submittedBy } : {}
+                      }),
+                      children: /* @__PURE__ */ jsxRuntime.jsxs(
+                        button.Button,
+                        {
+                          variant: "ghost",
+                          size: "icon",
+                          onClick: () => setViewSubmissionId(sub.id),
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "h-4 w-4" }),
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: localization?.FORM_BUILDER_SUBMISSIONS_ACTION_VIEW ?? t(
+                              "formBuilder.submissions.actionView",
+                              "View"
+                            ) })
+                          ]
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    context.PermissionAccess,
+                    {
+                      permission: permissions.formBuilderPermissions.submission.delete(
+                        {
+                          formId,
+                          submissionId: sub.id,
+                          exists: true,
+                          ...form?.createdBy ? { ownerId: form.createdBy } : {},
+                          ...sub.submittedBy ? { submittedBy: sub.submittedBy } : {}
+                        }
+                      ),
+                      children: /* @__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: localization?.FORM_BUILDER_SUBMISSIONS_ACTION_DELETE ?? t(
+                              "formBuilder.submissions.actionDelete",
+                              "Delete"
+                            ) })
+                          ]
+                        }
+                      )
+                    }
+                  )
+                ] }) })
+              ] }, sub.id)) })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          pagination.Pagination,
+          {
+            total,
+            showing: submissions.length,
+            hasMore,
+            isLoadingMore,
+            onLoadMore: loadMore,
+            className: classNames?.pagination,
+            labels: {
+              showing: localization?.FORM_BUILDER_LIST_PAGINATION_SHOWING ?? t(
+                "formBuilder.list.paginationShowing",
+                "Showing {count} of {total}"
+              ),
+              next: localization?.FORM_BUILDER_LIST_PAGINATION_NEXT ?? t("formBuilder.list.paginationNext", "Load More"),
+              loading: localization?.FORM_BUILDER_STATUS_LOADING ?? t("formBuilder.common.statusLoading", "Loading...")
+            }
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      dialog.Dialog,
+      {
+        open: !!viewSubmissionId,
+        onOpenChange: (open) => {
+          if (!open) setViewSubmissionId(null);
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { className: "max-w-2xl max-h-[80vh] overflow-auto", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogHeader, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: localization?.FORM_BUILDER_SUBMISSIONS_DETAILS_TITLE ?? t("formBuilder.submissions.detailsTitle", "Submission Details") }),
+            /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogDescription, { className: "sr-only", children: t(
+              "formBuilder.submissions.detailsDescription",
+              "Submitted form data and request metadata."
+            ) })
+          ] }),
+          isViewLoading && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: localization?.FORM_BUILDER_STATUS_LOADING ?? t("formBuilder.common.statusLoading", "Loading...") }),
+          viewError && /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: "text-sm text-destructive", children: localization?.FORM_BUILDER_TOAST_ERROR ?? t(
+            "formBuilder.toasts.error",
+            "An error occurred. Please try again."
+          ) }),
+          !isViewLoading && !viewError && 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: localization?.FORM_BUILDER_SUBMISSIONS_FIELD_ID ?? t("formBuilder.submissions.fieldId", "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: localization?.FORM_BUILDER_SUBMISSIONS_FIELD_SUBMITTED ?? t("formBuilder.submissions.fieldSubmitted", "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: localization?.FORM_BUILDER_SUBMISSIONS_FIELD_IP ?? t("formBuilder.submissions.fieldIp", "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: localization?.FORM_BUILDER_SUBMISSIONS_FIELD_USER_AGENT ?? t(
+                  "formBuilder.submissions.fieldUserAgent",
+                  "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: localization?.FORM_BUILDER_SUBMISSIONS_FIELD_DATA ?? t("formBuilder.submissions.fieldData", "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: localization?.FORM_BUILDER_SUBMISSIONS_DELETE_TITLE ?? t("formBuilder.submissions.deleteTitle", "Delete Submission") }),
+        /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogDescription, { children: localization?.FORM_BUILDER_SUBMISSIONS_DELETE_CONFIRM ?? t(
+          "formBuilder.submissions.deleteConfirm",
+          "Are you sure you want to delete this submission?"
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogFooter, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogCancel, { children: localization?.FORM_BUILDER_BUTTON_CANCEL ?? t("formBuilder.common.buttonCancel", "Cancel") }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          alertDialog.AlertDialogAction,
+          {
+            onClick: handleDelete,
+            className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+            children: deleteMutation.isPending ? localization?.FORM_BUILDER_STATUS_DELETING ?? t("formBuilder.common.statusDeleting", "Deleting...") : localization?.FORM_BUILDER_BUTTON_DELETE ?? t("formBuilder.common.buttonDelete", "Delete")
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+
+exports.SubmissionsPage = SubmissionsPage;