@btst/stack 2.12.2 → 3.0.0-rc.2

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

@@ -1,9 +1,11 @@
 "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 { 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';
 
 const FormListPage = lazy(
   () => import('./form-list-page.internal.mjs').then((m) => ({
@@ -11,7 +13,25 @@ const FormListPage = lazy(
   }))
 );
 function FormListPageComponent() {
-  return /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: DefaultError, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(FormListSkeleton, {}), children: /* @__PURE__ */ jsx(FormListPage, {}) }) });
+  const { onRouteError } = usePluginOverrides("form-builder");
+  return /* @__PURE__ */ jsx(
+    ComposedRoute,
+    {
+      path: "/forms",
+      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/packages/stack/src/plugins/form-builder/client/components/pages/submissions-page.cjs

@@ -3,9 +3,11 @@
 
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
-const submissionsSkeleton = require('../loading/submissions-skeleton.cjs');
-const reactErrorBoundary = require('react-error-boundary');
+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 SubmissionsPage = React.lazy(
   () => import('./submissions-page.internal.cjs').then((m) => ({
@@ -13,7 +15,33 @@ const SubmissionsPage = React.lazy(
   }))
 );
 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 }) }) });
+  const { onRouteError } = context.usePluginOverrides("form-builder");
+  const path = `/forms/${formId}/submissions`;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components.ComposedRoute,
+    {
+      path,
+      PageComponent: SubmissionsPage,
+      ErrorComponent: defaultError.DefaultError,
+      LoadingComponent: submissionsSkeleton.SubmissionsSkeleton,
+      NotFoundComponent: _404Page.NotFoundPage,
+      permission: {
+        resource: "form-builder:submission",
+        action: "read",
+        params: { formId }
+      },
+      props: { formId },
+      onError: (error) => {
+        if (onRouteError) {
+          onRouteError("submissions", error, {
+            path,
+            params: { formId },
+            isSSR: typeof window === "undefined"
+          });
+        }
+      }
+    }
+  );
 }
 
 exports.SubmissionsPageComponent = SubmissionsPageComponent;

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

@@ -9,35 +9,40 @@ 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 LucideIcons = 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');
+const formBuilderHooks = require('../../hooks/form-builder-hooks.cjs');
 
 function SubmissionsPage({ formId }) {
-  const { navigate, Link, localization } = context.usePluginOverrides("form-builder", {
-    localization: index.FORM_BUILDER_LOCALIZATION
-  });
+  const t = context.useTranslate();
+  const notify = context.useNotify();
+  const { localization } = context.usePluginOverrides("form-builder");
+  const { router } = context.useStack();
   const basePath = context.useBasePath();
   const { form } = formBuilderHooks.useSuspenseFormById(formId);
-  const { submissions, total, hasMore, isLoadingMore, loadMore, refetch } = formBuilderHooks.useSuspenseSubmissions(formId);
+  const { submissions, total, hasMore, isLoadingMore, loadMore } = 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 LinkComponent = router?.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);
+    } 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);
   };
   const formatSubmissionData = (data) => {
     const entries = Object.entries(data).slice(0, 3);
@@ -52,24 +57,33 @@ function SubmissionsPage({ formId }) {
       /* @__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(LucideIcons.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 })
+          /* @__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: loc.FORM_BUILDER_SUBMISSIONS_EMPTY,
-          description: loc.FORM_BUILDER_SUBMISSIONS_EMPTY_DESCRIPTION
+          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: "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.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_DATA ?? t("formBuilder.submissions.columnData", "Data") }),
+            /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { children: localization?.FORM_BUILDER_SUBMISSIONS_COLUMN_SUBMITTED_AT ?? t(
+              "formBuilder.submissions.columnSubmittedAt",
+              "Submitted"
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { children: localization?.FORM_BUILDER_SUBMISSIONS_COLUMN_IP_ADDRESS ?? t(
+              "formBuilder.submissions.columnIpAddress",
+              "IP Address"
+            ) }),
+            /* @__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, { children: [
             /* @__PURE__ */ jsxRuntime.jsxs(table.TableCell, { className: "font-mono text-xs", children: [
@@ -88,21 +102,32 @@ function SubmissionsPage({ formId }) {
                   onClick: () => setViewSubmission(sub),
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Eye, { className: "h-4 w-4" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "View" })
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: localization?.FORM_BUILDER_SUBMISSIONS_ACTION_VIEW ?? t("formBuilder.submissions.actionView", "View") })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                button.Button,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                context.CanAccess,
                 {
-                  variant: "ghost",
-                  size: "icon",
-                  className: "text-destructive",
-                  onClick: () => setDeleteId(sub.id),
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Trash2, { className: "h-4 w-4" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Delete" })
-                  ]
+                  resource: "form-builder:submission",
+                  action: "delete",
+                  params: { formId, id: sub.id },
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    button.Button,
+                    {
+                      variant: "ghost",
+                      size: "icon",
+                      className: "text-destructive",
+                      onClick: () => setDeleteId(sub.id),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.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"
+                        ) })
+                      ]
+                    }
+                  )
                 }
               )
             ] }) })
@@ -115,7 +140,15 @@ function SubmissionsPage({ formId }) {
             showing: submissions.length,
             hasMore,
             isLoadingMore,
-            onLoadMore: loadMore
+            onLoadMore: loadMore,
+            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...")
+            }
           }
         )
       ] })
@@ -126,28 +159,31 @@ function SubmissionsPage({ formId }) {
         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" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: localization?.FORM_BUILDER_SUBMISSIONS_DETAILS_TITLE ?? t("formBuilder.submissions.detailsTitle", "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("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: "Submitted:" }),
+                /* @__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: "IP Address:" }),
+                /* @__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: "User Agent:" }),
+                /* @__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: "Data:" }),
+              /* @__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) })
             ] })
           ] })
@@ -156,17 +192,20 @@ function SubmissionsPage({ formId }) {
     ),
     /* @__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.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: loc.FORM_BUILDER_BUTTON_CANCEL }),
+        /* @__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 ? loc.FORM_BUILDER_STATUS_DELETING : loc.FORM_BUILDER_BUTTON_DELETE
+            children: deleteMutation.isPending ? localization?.FORM_BUILDER_STATUS_DELETING ?? t("formBuilder.common.statusDeleting", "Deleting...") : localization?.FORM_BUILDER_BUTTON_DELETE ?? t("formBuilder.common.buttonDelete", "Delete")
           }
         )
       ] })

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

@@ -1,41 +1,46 @@
 "use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { usePluginOverrides, useBasePath } from '@btst/stack/context';
+import { useTranslate, useNotify, usePluginOverrides, useStack, useBasePath, CanAccess } 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';
+import { useSuspenseFormById, useSuspenseSubmissions, useDeleteSubmission } from '../../hooks/form-builder-hooks.mjs';
 
 function SubmissionsPage({ formId }) {
-  const { navigate, Link, localization } = usePluginOverrides("form-builder", {
-    localization: FORM_BUILDER_LOCALIZATION
-  });
+  const t = useTranslate();
+  const notify = useNotify();
+  const { localization } = usePluginOverrides("form-builder");
+  const { router } = useStack();
   const basePath = useBasePath();
   const { form } = useSuspenseFormById(formId);
-  const { submissions, total, hasMore, isLoadingMore, loadMore, refetch } = useSuspenseSubmissions(formId);
+  const { submissions, total, hasMore, isLoadingMore, loadMore } = 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 LinkComponent = router?.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);
+    } 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);
   };
   const formatSubmissionData = (data) => {
     const entries = Object.entries(data).slice(0, 3);
@@ -50,24 +55,33 @@ function SubmissionsPage({ formId }) {
       /* @__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 })
+          /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold", children: form?.name || (localization?.FORM_BUILDER_SUBMISSIONS_TITLE ?? t("formBuilder.submissions.title", "Submissions")) }),
+          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: localization?.FORM_BUILDER_SUBMISSIONS_SUBTITLE ?? t("formBuilder.submissions.subtitle", "View form submissions") })
         ] })
       ] }),
       submissions.length === 0 ? /* @__PURE__ */ jsx(
         EmptyState,
         {
-          title: loc.FORM_BUILDER_SUBMISSIONS_EMPTY,
-          description: loc.FORM_BUILDER_SUBMISSIONS_EMPTY_DESCRIPTION
+          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__ */ 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(TableHead, { className: "w-24", children: localization?.FORM_BUILDER_SUBMISSIONS_COLUMN_ID ?? t("formBuilder.submissions.columnId", "ID") }),
+            /* @__PURE__ */ jsx(TableHead, { children: localization?.FORM_BUILDER_SUBMISSIONS_COLUMN_DATA ?? t("formBuilder.submissions.columnData", "Data") }),
+            /* @__PURE__ */ jsx(TableHead, { children: localization?.FORM_BUILDER_SUBMISSIONS_COLUMN_SUBMITTED_AT ?? t(
+              "formBuilder.submissions.columnSubmittedAt",
+              "Submitted"
+            ) }),
+            /* @__PURE__ */ jsx(TableHead, { children: localization?.FORM_BUILDER_SUBMISSIONS_COLUMN_IP_ADDRESS ?? t(
+              "formBuilder.submissions.columnIpAddress",
+              "IP Address"
+            ) }),
+            /* @__PURE__ */ jsx(TableHead, { className: "w-24", children: localization?.FORM_BUILDER_SUBMISSIONS_COLUMN_ACTIONS ?? t("formBuilder.submissions.columnActions", "Actions") })
           ] }) }),
           /* @__PURE__ */ jsx(TableBody, { children: submissions.map((sub) => /* @__PURE__ */ jsxs(TableRow, { children: [
             /* @__PURE__ */ jsxs(TableCell, { className: "font-mono text-xs", children: [
@@ -86,21 +100,32 @@ function SubmissionsPage({ formId }) {
                   onClick: () => setViewSubmission(sub),
                   children: [
                     /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" }),
-                    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "View" })
+                    /* @__PURE__ */ jsx("span", { className: "sr-only", children: localization?.FORM_BUILDER_SUBMISSIONS_ACTION_VIEW ?? t("formBuilder.submissions.actionView", "View") })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs(
-                Button,
+              /* @__PURE__ */ jsx(
+                CanAccess,
                 {
-                  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" })
-                  ]
+                  resource: "form-builder:submission",
+                  action: "delete",
+                  params: { formId, id: sub.id },
+                  children: /* @__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: localization?.FORM_BUILDER_SUBMISSIONS_ACTION_DELETE ?? t(
+                          "formBuilder.submissions.actionDelete",
+                          "Delete"
+                        ) })
+                      ]
+                    }
+                  )
                 }
               )
             ] }) })
@@ -113,7 +138,15 @@ function SubmissionsPage({ formId }) {
             showing: submissions.length,
             hasMore,
             isLoadingMore,
-            onLoadMore: loadMore
+            onLoadMore: loadMore,
+            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...")
+            }
           }
         )
       ] })
@@ -124,28 +157,31 @@ function SubmissionsPage({ formId }) {
         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" }) }),
+          /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: localization?.FORM_BUILDER_SUBMISSIONS_DETAILS_TITLE ?? t("formBuilder.submissions.detailsTitle", "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("span", { className: "text-muted-foreground", children: localization?.FORM_BUILDER_SUBMISSIONS_FIELD_ID ?? t("formBuilder.submissions.fieldId", "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("span", { className: "text-muted-foreground", children: localization?.FORM_BUILDER_SUBMISSIONS_FIELD_SUBMITTED ?? t("formBuilder.submissions.fieldSubmitted", "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("span", { className: "text-muted-foreground", children: localization?.FORM_BUILDER_SUBMISSIONS_FIELD_IP ?? t("formBuilder.submissions.fieldIp", "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("span", { className: "text-muted-foreground", children: localization?.FORM_BUILDER_SUBMISSIONS_FIELD_USER_AGENT ?? t(
+                  "formBuilder.submissions.fieldUserAgent",
+                  "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("span", { className: "text-muted-foreground text-sm", children: localization?.FORM_BUILDER_SUBMISSIONS_FIELD_DATA ?? t("formBuilder.submissions.fieldData", "Data:") }),
               /* @__PURE__ */ jsx("pre", { className: "mt-2 p-4 bg-muted rounded-lg text-sm overflow-auto", children: JSON.stringify(viewSubmission.parsedData, null, 2) })
             ] })
           ] })
@@ -154,17 +190,20 @@ function SubmissionsPage({ formId }) {
     ),
     /* @__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__ */ jsx(AlertDialogTitle, { children: localization?.FORM_BUILDER_SUBMISSIONS_DELETE_TITLE ?? t("formBuilder.submissions.deleteTitle", "Delete Submission") }),
+        /* @__PURE__ */ jsx(AlertDialogDescription, { children: localization?.FORM_BUILDER_SUBMISSIONS_DELETE_CONFIRM ?? t(
+          "formBuilder.submissions.deleteConfirm",
+          "Are you sure you want to delete this submission?"
+        ) })
       ] }),
       /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
-        /* @__PURE__ */ jsx(AlertDialogCancel, { children: loc.FORM_BUILDER_BUTTON_CANCEL }),
+        /* @__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 ? loc.FORM_BUILDER_STATUS_DELETING : loc.FORM_BUILDER_BUTTON_DELETE
+            children: deleteMutation.isPending ? localization?.FORM_BUILDER_STATUS_DELETING ?? t("formBuilder.common.statusDeleting", "Deleting...") : localization?.FORM_BUILDER_BUTTON_DELETE ?? t("formBuilder.common.buttonDelete", "Delete")
           }
         )
       ] })

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

@@ -1,9 +1,11 @@
 "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 { lazy } from 'react';
+import { usePluginOverrides } from '@btst/stack/context';
+import { ComposedRoute } from '@btst/stack/client/components';
 import { DefaultError } from '../shared/default-error.mjs';
+import { SubmissionsSkeleton } from '../loading/submissions-skeleton.mjs';
+import { NotFoundPage } from './404-page.mjs';
 
 const SubmissionsPage = lazy(
   () => import('./submissions-page.internal.mjs').then((m) => ({
@@ -11,7 +13,33 @@ const SubmissionsPage = lazy(
   }))
 );
 function SubmissionsPageComponent({ formId }) {
-  return /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: DefaultError, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(SubmissionsSkeleton, {}), children: /* @__PURE__ */ jsx(SubmissionsPage, { formId }) }) });
+  const { onRouteError } = usePluginOverrides("form-builder");
+  const path = `/forms/${formId}/submissions`;
+  return /* @__PURE__ */ jsx(
+    ComposedRoute,
+    {
+      path,
+      PageComponent: SubmissionsPage,
+      ErrorComponent: DefaultError,
+      LoadingComponent: SubmissionsSkeleton,
+      NotFoundComponent: NotFoundPage,
+      permission: {
+        resource: "form-builder:submission",
+        action: "read",
+        params: { formId }
+      },
+      props: { formId },
+      onError: (error) => {
+        if (onRouteError) {
+          onRouteError("submissions", error, {
+            path,
+            params: { formId },
+            isSSR: typeof window === "undefined"
+          });
+        }
+      }
+    }
+  );
 }
 
 export { SubmissionsPageComponent };

package/dist/packages/stack/src/plugins/form-builder/client/components/shared/pagination.cjs

@@ -15,7 +15,8 @@ function Pagination({
 }) {
   const {
     showing: showingLabel = "Showing {count} of {total}",
-    next = "Load More"
+    next = "Load More",
+    loading = "Loading..."
   } = labels;
   const showingText = showingLabel.replace("{count}", String(showing)).replace("{total}", String(total));
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-4", children: [
@@ -28,7 +29,7 @@ function Pagination({
         onClick: onLoadMore,
         disabled: isLoadingMore,
         children: [
-          isLoadingMore ? "Loading..." : next,
+          isLoadingMore ? loading : next,
           /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronRight, { className: "ml-2 h-4 w-4" })
         ]
       }