@frigear-nu/forms 0.0.0-stage → 0.0.1

package/dist/runtime/app/components/FormRenderer.vue

@@ -0,0 +1,145 @@
+<script setup>
+import { translate } from "../../utils";
+import { emptyAnswers, submitAnswers, useFormsLocale } from "../composables/useForms";
+import { useFormStepper } from "../composables/useFormStepper";
+const props = defineProps({
+  slug: { type: String, required: false },
+  form: { type: Object, required: false },
+  preview: { type: Boolean, required: false }
+});
+const emit = defineEmits(["submitted"]);
+const t = useModuleT("forms");
+const locale = useFormsLocale();
+const toast = useToast();
+const loaded = props.slug ? await useForm(props.slug) : void 0;
+const form = computed(() => props.form ?? loaded?.data.value ?? void 0);
+const definition = computed(() => form.value?.definition);
+const state = reactive(form.value ? emptyAnswers(form.value.definition) : {});
+watch(() => form.value?.definition, (next) => {
+  if (!next) return;
+  for (const [key, value] of Object.entries(emptyAnswers(next))) if (!(key in state)) state[key] = value;
+});
+const stepper = useFormStepper(definition, state, { t: () => t, locale });
+const formRef = useTemplateRef("formRef");
+const submitting = ref(false);
+const done = ref(false);
+const submitSettings = computed(() => definition.value?.submit);
+const title = (value) => translate(value, locale.value);
+async function onSubmit() {
+  if (!stepper.isLast.value) return stepper.next();
+  if (props.preview) {
+    toast.add({ title: t("preview.notSent", "Preview: nothing was sent."), color: "info" });
+    return;
+  }
+  submitting.value = true;
+  try {
+    const result = await submitAnswers(form.value.slug, definition.value, state, locale.value);
+    done.value = true;
+    emit("submitted", result.id);
+    const redirect = submitSettings.value?.redirect;
+    if (redirect) await navigateTo(redirect);
+  } catch (error) {
+    const issues = error.data?.data?.issues;
+    if (issues?.length) {
+      formRef.value?.setErrors(issues.map((issue) => ({ name: String(issue.path[0] ?? ""), message: issue.message })));
+      toast.add({ title: t("error.invalid", "Please check the highlighted fields."), color: "error" });
+    } else {
+      toast.add({ title: t("error.generic", "Something went wrong. Please try again."), color: "error" });
+    }
+  } finally {
+    submitting.value = false;
+  }
+}
+function sendAnother() {
+  const keep = new Set(submitSettings.value?.allowResubmit?.keep ?? []);
+  const fresh = emptyAnswers(definition.value);
+  for (const key of Object.keys(state)) state[key] = keep.has(key) ? state[key] : fresh[key];
+  stepper.reset();
+  done.value = false;
+}
+</script>
+
+<template>
+  <UAlert
+    v-if="!form"
+    color="error"
+    variant="subtle"
+    :title="t('error.notFound', 'This form could not be found.')"
+  />
+
+  <UEmpty
+    v-else-if="done"
+    icon="i-lucide-circle-check"
+    :title="title(submitSettings?.successMessage) || t('success.title', 'Thank you!')"
+    :description="title(submitSettings?.successMessage) ? void 0 : t('success.description', 'Your answers have been sent.')"
+    :actions="submitSettings?.allowResubmit ? [{ label: t('actions.sendAnother', 'Send another'), onClick: sendAnother }] : []"
+  />
+
+  <UForm
+    v-else
+    ref="formRef"
+    :schema="stepper.schema.value"
+    :state="state"
+    class="space-y-6"
+    @submit="onSubmit"
+  >
+    <template v-if="stepper.current.value">
+      <div
+        v-if="stepper.stepped.value && stepper.steps.value.length > 1"
+        class="space-y-2"
+      >
+        <p class="text-sm text-muted">
+          {{ t("step.progress", "Step {current} of {total}", { current: stepper.index.value + 1, total: stepper.steps.value.length }) }}
+        </p>
+        <UProgress
+          :model-value="stepper.index.value + 1"
+          :max="stepper.steps.value.length"
+          size="sm"
+        />
+      </div>
+
+      <div
+        v-if="stepper.current.value.step.title || stepper.current.value.step.description"
+        class="space-y-1"
+      >
+        <h2
+          v-if="stepper.current.value.step.title"
+          class="text-xl font-semibold"
+        >
+          {{ title(stepper.current.value.step.title) }}
+        </h2>
+        <p
+          v-if="stepper.current.value.step.description"
+          class="text-muted"
+        >
+          {{ title(stepper.current.value.step.description) }}
+        </p>
+      </div>
+
+      <FormField
+        v-for="field in stepper.current.value.fields"
+        :key="field.key"
+        v-model="state[field.key]"
+        :field="field"
+        :locale="locale"
+      />
+    </template>
+
+    <div class="flex justify-between gap-2">
+      <UButton
+        v-if="stepper.stepped.value && !stepper.isFirst.value"
+        type="button"
+        color="neutral"
+        variant="outline"
+        :label="t('actions.back', 'Back')"
+        @click="stepper.prev()"
+      />
+      <span v-else />
+      <UButton
+        type="submit"
+        :loading="submitting"
+        :label="stepper.isLast.value ? title(submitSettings?.label) || t('actions.submit', 'Submit') : t('actions.next', 'Next')"
+      />
+    </div>
+  </UForm>
+</template>

package/dist/runtime/app/components/FormRenderer.vue.d.ts

@@ -0,0 +1,19 @@
+import type { FormDefinition, PublicFormDto } from '../../../types.js';
+type FormShape = Pick<PublicFormDto, 'slug' | 'definition'> & {
+    definition: Omit<FormDefinition, 'delivery'>;
+};
+type __VLS_Props = {
+    /** Slug of a published form (loaded from the API). */
+    slug?: string;
+    /** A definition to render directly (admin preview, tests). */
+    form?: FormShape;
+    /** Validates and steps like normal, but never posts. */
+    preview?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    submitted: (id: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSubmitted?: ((id: string | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FormSubmissionView.d.vue.ts

@@ -0,0 +1,7 @@
+import type { SubmissionDto } from '../../../types.js';
+type __VLS_Props = {
+    submission: SubmissionDto;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FormSubmissionView.vue

@@ -0,0 +1,77 @@
+<script setup>
+import { isInputField, resolveVisibility, translate } from "../../utils";
+const props = defineProps({
+  submission: { type: Object, required: true }
+});
+const t = useModuleT("forms");
+const locale = useFormsLocale();
+const sections = computed(() => resolveVisibility(props.submission.definition, props.submission.answers).map(({ step, fields }) => ({
+  id: step.id,
+  title: translate(step.title, locale.value),
+  rows: fields.filter(isInputField).map((field) => {
+    const value = props.submission.answers[field.key];
+    const option = (v) => translate(field.options?.find((o) => o.value === v)?.label, locale.value) || v;
+    return {
+      key: field.key,
+      label: translate(field.label, locale.value) || field.key,
+      type: field.type,
+      value: field.type === "checkbox" ? value ? t("value.yes", "Yes") : t("value.no", "No") : (field.type === "select" || field.type === "radio") && typeof value === "string" ? option(value) : value === void 0 || value === null || value === "" ? "" : String(value),
+      files: props.submission.files.filter((file) => file.fieldKey === field.key)
+    };
+  })
+})));
+const fileUrl = (fileId) => `/api/forms/admin/submissions/${props.submission.id}/files/${fileId}`;
+</script>
+
+<template>
+  <div class="space-y-6">
+    <section
+      v-for="section in sections"
+      :key="section.id"
+      class="space-y-3"
+    >
+      <h3
+        v-if="section.title"
+        class="font-semibold"
+      >
+        {{ section.title }}
+      </h3>
+      <dl class="grid gap-x-6 gap-y-3 sm:grid-cols-[minmax(0,14rem)_1fr]">
+        <template
+          v-for="row in section.rows"
+          :key="row.key"
+        >
+          <dt class="text-sm text-muted">
+            {{ row.label }}
+          </dt>
+          <dd class="whitespace-pre-wrap break-words">
+            <template v-if="row.type === 'file'">
+              <ul
+                v-if="row.files.length"
+                class="space-y-1"
+              >
+                <li
+                  v-for="file in row.files"
+                  :key="file.id"
+                >
+                  <a
+                    :href="fileUrl(file.id)"
+                    class="underline"
+                    download
+                  >{{ file.filename }}</a>
+                </li>
+              </ul>
+              <span
+                v-else
+                class="text-muted"
+              >-</span>
+            </template>
+            <template v-else>
+              {{ row.value || "-" }}
+            </template>
+          </dd>
+        </template>
+      </dl>
+    </section>
+  </div>
+</template>

package/dist/runtime/app/components/FormSubmissionView.vue.d.ts

@@ -0,0 +1,7 @@
+import type { SubmissionDto } from '../../../types.js';
+type __VLS_Props = {
+    submission: SubmissionDto;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/composables/index.d.ts

@@ -0,0 +1,2 @@
+export { useForm, useFormsLocale, useFormsPaths, emptyAnswers, submitAnswers, fieldLabel } from './useForms.js';
+export { useFormStepper } from './useFormStepper.js';

package/dist/runtime/app/composables/index.js

@@ -0,0 +1,2 @@
+export { useForm, useFormsLocale, useFormsPaths, emptyAnswers, submitAnswers, fieldLabel } from "./useForms.js";
+export { useFormStepper } from "./useFormStepper.js";

package/dist/runtime/app/composables/useFormStepper.d.ts

@@ -0,0 +1,21 @@
+import type { FormDefinition } from '../../../types.js';
+import type { Answers, MessageTranslator } from '../../utils/index.js';
+/**
+ * State machine for single page and stepped forms. Steps and fields that are hidden by `showIf`
+ * are skipped, so `current` always refers to a visible step.
+ */
+export declare function useFormStepper(definition: MaybeRefOrGetter<FormDefinition>, answers: MaybeRefOrGetter<Answers>, options?: {
+    t?: MaybeRefOrGetter<MessageTranslator | undefined>;
+    locale?: MaybeRefOrGetter<string>;
+}): {
+    steps: any;
+    index: any;
+    current: any;
+    isFirst: any;
+    isLast: any;
+    stepped: any;
+    schema: any;
+    next: () => void;
+    prev: () => void;
+    reset: (to?: number) => void;
+};

package/dist/runtime/app/composables/useFormStepper.js

@@ -0,0 +1,33 @@
+import { buildFormSchema, resolveVisibility } from "../../utils/index.js";
+export function useFormStepper(definition, answers, options = {}) {
+  const position = ref(0);
+  const steps = computed(() => resolveVisibility(toValue(definition), toValue(answers)));
+  const index = computed(() => Math.min(position.value, Math.max(steps.value.length - 1, 0)));
+  const current = computed(() => steps.value[index.value]);
+  const isFirst = computed(() => index.value === 0);
+  const isLast = computed(() => index.value >= steps.value.length - 1);
+  const stepped = computed(() => toValue(definition).mode === "stepped");
+  const schema = computed(() => buildFormSchema(toValue(definition), toValue(answers), {
+    stepIndex: current.value?.index,
+    t: toValue(options.t),
+    locale: toValue(options.locale)
+  }));
+  return {
+    steps,
+    index,
+    current,
+    isFirst,
+    isLast,
+    stepped,
+    schema,
+    next: () => {
+      if (!isLast.value) position.value = index.value + 1;
+    },
+    prev: () => {
+      if (!isFirst.value) position.value = index.value - 1;
+    },
+    reset: (to = 0) => {
+      position.value = to;
+    }
+  };
+}

package/dist/runtime/app/composables/useForms.d.ts

@@ -0,0 +1,21 @@
+import type { FormDefinition, FormField } from '../../../types.js';
+/** Locale for translated form content: `@nuxtjs/i18n`'s when installed, otherwise `en`. */
+export declare function useFormsLocale(): any;
+/** Loads a published form definition by slug. */
+export declare function useForm(slug: MaybeRefOrGetter<string>): any;
+/** Initial answers: empty arrays for files, `false` for checkboxes, everything else unset. */
+export declare function emptyAnswers(definition: Pick<FormDefinition, 'steps'>): Record<string, unknown>;
+/** Posts the answers: JSON for forms without files, multipart (answers + `file:<key>` parts) otherwise. */
+export declare function submitAnswers(slug: string, definition: Pick<FormDefinition, 'steps'>, answers: Record<string, unknown>, locale: string): Promise<any>;
+declare const DEFAULT_PATHS: {
+    readonly form: "/forms/:slug";
+    readonly admin: "/admin/forms";
+    readonly adminForm: "/admin/forms/:id";
+    readonly adminSubmissions: "/admin/forms/:id/submissions";
+    readonly adminSubmission: "/admin/forms/:id/submissions/:submissionId";
+};
+/** Resolves the (configurable) page paths, filling in params. */
+export declare function useFormsPaths(): (name: keyof typeof DEFAULT_PATHS, params?: Record<string, string>) => string;
+/** Label of a field in the given locale, falling back to its key. */
+export declare const fieldLabel: (field: FormField, locale: string) => string;
+export {};

package/dist/runtime/app/composables/useForms.js

@@ -0,0 +1,52 @@
+import { resolveVisibility, translate } from "../../utils/index.js";
+export function useFormsLocale() {
+  const nuxtApp = useNuxtApp();
+  return computed(() => nuxtApp.$i18n?.locale?.value ?? "en");
+}
+export function useForm(slug) {
+  return useFetch(() => `/api/forms/${toValue(slug)}`, { key: `forms:${toValue(slug)}` });
+}
+export function emptyAnswers(definition) {
+  const state = {};
+  for (const step of definition.steps) {
+    for (const field of step.fields) {
+      if (field.type === "file") state[field.key] = [];
+      else if (field.type === "checkbox") state[field.key] = false;
+      else if (field.type !== "markdown") state[field.key] = void 0;
+    }
+  }
+  return state;
+}
+export async function submitAnswers(slug, definition, answers, locale) {
+  const files = [];
+  const plain = {};
+  const visible = new Set(resolveVisibility(definition, answers).flatMap((step) => step.fields.map((field) => field.key)));
+  for (const [key, value] of Object.entries(answers)) {
+    if (!visible.has(key)) continue;
+    if (Array.isArray(value) && value.every((item) => item instanceof File)) {
+      files.push(...value.map((file) => ({ key, file })));
+      continue;
+    }
+    plain[key] = value;
+  }
+  if (!files.length) {
+    return $fetch(`/api/forms/${slug}/submit`, { method: "POST", body: { answers: plain, locale } });
+  }
+  const body = new FormData();
+  body.append("answers", JSON.stringify(plain));
+  body.append("locale", locale);
+  for (const { key, file } of files) body.append(`file:${key}`, file, file.name);
+  return $fetch(`/api/forms/${slug}/submit`, { method: "POST", body });
+}
+const DEFAULT_PATHS = {
+  form: "/forms/:slug",
+  admin: "/admin/forms",
+  adminForm: "/admin/forms/:id",
+  adminSubmissions: "/admin/forms/:id/submissions",
+  adminSubmission: "/admin/forms/:id/submissions/:submissionId"
+};
+export function useFormsPaths() {
+  const pages = useRuntimeConfig().public.forms?.pages ?? {};
+  return (name, params = {}) => Object.entries(params).reduce((path, [key, value]) => path.replace(`:${key}`, encodeURIComponent(value)), pages[name] ?? DEFAULT_PATHS[name]);
+}
+export const fieldLabel = (field, locale) => translate(field.label, locale) || field.key;

package/dist/runtime/app/pages/admin-form.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/pages/admin-form.vue

@@ -0,0 +1,150 @@
+<script setup>
+import { formDefinitionSchema } from "../../utils";
+const t = useModuleT("forms");
+const route = useRoute();
+const paths = useFormsPaths();
+const toast = useToast();
+const id = computed(() => String(route.params.id));
+const { data: form, error, refresh } = await useFetch(() => `/api/forms/admin/forms/${id.value}`);
+const draft = reactive({ name: form.value?.name ?? "", slug: form.value?.slug ?? "", status: form.value?.status ?? "draft" });
+const json = ref(form.value ? JSON.stringify(form.value.definition, null, 2) : "");
+const checked = computed(() => {
+  try {
+    const result = formDefinitionSchema.safeParse(JSON.parse(json.value));
+    return result.success ? { definition: result.data, issues: [] } : { definition: void 0, issues: result.error.issues.map((issue) => `${issue.path.join(".") || "(root)"}: ${issue.message}`) };
+  } catch {
+    return { definition: void 0, issues: [t("admin.invalidJson", "The JSON is not valid.")] };
+  }
+});
+const previewKey = ref(0);
+const saving = ref(false);
+const statuses = ["draft", "published", "archived"];
+async function save() {
+  if (!checked.value.definition) return;
+  saving.value = true;
+  try {
+    await $fetch(`/api/forms/admin/forms/${id.value}`, { method: "PATCH", body: { ...draft, definition: checked.value.definition } });
+    await refresh();
+    previewKey.value++;
+    toast.add({ title: t("admin.saved", "Saved."), color: "success" });
+  } catch (cause) {
+    toast.add({ title: cause.statusMessage ?? t("error.generic", "Something went wrong. Please try again."), color: "error" });
+  } finally {
+    saving.value = false;
+  }
+}
+</script>
+
+<template>
+  <UContainer class="space-y-6 py-10">
+    <UAlert
+      v-if="error || !form"
+      color="error"
+      variant="subtle"
+      :title="t('admin.forbidden', 'You are not allowed to manage forms.')"
+    />
+
+    <template v-else>
+      <div class="flex flex-wrap items-center justify-between gap-2">
+        <div>
+          <NuxtLink
+            :to="paths('admin')"
+            class="text-sm text-muted hover:underline"
+          >
+            ← {{ t("admin.title", "Forms") }}
+          </NuxtLink>
+          <h1 class="text-3xl font-bold">
+            {{ form.name }} <span class="text-base font-normal text-muted">v{{ form.version }}</span>
+          </h1>
+        </div>
+        <div class="flex gap-2">
+          <UButton
+            v-if="form.definition.storage === 'db'"
+            color="neutral"
+            variant="outline"
+            :to="paths('adminSubmissions', { id: form.id })"
+            :label="t('admin.submissionsTitle', 'Submissions')"
+          />
+          <UButton
+            :loading="saving"
+            :disabled="!checked.definition"
+            :label="t('admin.save', 'Save')"
+            @click="save"
+          />
+        </div>
+      </div>
+
+      <div class="grid gap-4 sm:grid-cols-3">
+        <UFormField :label="t('admin.name', 'Name')">
+          <UInput
+            v-model="draft.name"
+            class="w-full"
+          />
+        </UFormField>
+        <UFormField :label="t('admin.slug', 'Slug')">
+          <UInput
+            v-model="draft.slug"
+            class="w-full"
+          />
+        </UFormField>
+        <UFormField :label="t('admin.status', 'Status')">
+          <USelect
+            v-model="draft.status"
+            :items="statuses.map((value) => ({ value, label: t(`status.${value}`, value) }))"
+            class="w-full"
+          />
+        </UFormField>
+      </div>
+
+      <div class="grid gap-6 lg:grid-cols-2">
+        <div class="space-y-3">
+          <h2 class="font-semibold">
+            {{ t("admin.definition", "Definition (JSON)") }}
+          </h2>
+          <UTextarea
+            v-model="json"
+            :rows="30"
+            class="w-full font-mono text-xs"
+          />
+          <UAlert
+            v-if="checked.issues.length"
+            color="error"
+            variant="subtle"
+            :title="t('admin.invalidDefinition', 'The definition has problems')"
+          >
+            <template #description>
+              <ul class="list-disc pl-4">
+                <li
+                  v-for="issue in checked.issues"
+                  :key="issue"
+                >
+                  {{ issue }}
+                </li>
+              </ul>
+            </template>
+          </UAlert>
+        </div>
+
+        <div class="space-y-3">
+          <h2 class="font-semibold">
+            {{ t("admin.preview", "Preview") }}
+          </h2>
+          <div class="rounded-lg border border-default p-6">
+            <FormRenderer
+              v-if="checked.definition"
+              :key="previewKey + json.length"
+              :form="{ slug: draft.slug, definition: checked.definition }"
+              preview
+            />
+            <p
+              v-else
+              class="text-muted"
+            >
+              {{ t("admin.previewUnavailable", "Fix the definition to see a preview.") }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </template>
+  </UContainer>
+</template>

package/dist/runtime/app/pages/admin-form.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/pages/admin-submission.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/pages/admin-submission.vue

@@ -0,0 +1,59 @@
+<script setup>
+const t = useModuleT("forms");
+const route = useRoute();
+const paths = useFormsPaths();
+const toast = useToast();
+const id = computed(() => String(route.params.id));
+const submissionId = computed(() => String(route.params.submissionId));
+const { data: submission, error, refresh } = await useFetch(() => `/api/forms/admin/submissions/${submissionId.value}`);
+const redelivering = ref(false);
+async function redeliver() {
+  redelivering.value = true;
+  try {
+    await $fetch(`/api/forms/admin/submissions/${submissionId.value}/redeliver`, { method: "POST" });
+    await refresh();
+  } catch (cause) {
+    toast.add({ title: cause.statusMessage ?? t("error.generic", "Something went wrong. Please try again."), color: "error" });
+  } finally {
+    redelivering.value = false;
+  }
+}
+</script>
+
+<template>
+  <UContainer class="max-w-3xl space-y-6 py-10">
+    <UAlert
+      v-if="error || !submission"
+      color="error"
+      variant="subtle"
+      :title="t('admin.forbidden', 'You are not allowed to manage forms.')"
+    />
+
+    <template v-else>
+      <div>
+        <NuxtLink
+          :to="paths('adminSubmissions', { id })"
+          class="text-sm text-muted hover:underline"
+        >
+          ← {{ t("admin.submissionsTitle", "Submissions") }}
+        </NuxtLink>
+        <h1 class="text-3xl font-bold">
+          {{ new Date(submission.createdAt).toLocaleString() }}
+        </h1>
+        <p class="text-sm text-muted">
+          {{ submission.formSlug }} · v{{ submission.formVersion }} · {{ submission.locale }}
+        </p>
+      </div>
+
+      <UAlert
+        :color="submission.deliveryStatus === 'failed' ? 'error' : 'neutral'"
+        variant="subtle"
+        :title="t(`delivery.${submission.deliveryStatus}`, submission.deliveryStatus)"
+        :description="submission.deliveryError ?? void 0"
+        :actions="[{ label: t('admin.redeliver', 'Deliver again'), loading: redelivering, onClick: redeliver }]"
+      />
+
+      <FormSubmissionView :submission="submission" />
+    </template>
+  </UContainer>
+</template>

package/dist/runtime/app/pages/admin-submission.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/pages/admin-submissions.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;