@abgov/nx-adsp 13.30.0 → 13.31.1

package/src/generators/vue-detail-view/schema.d.ts

@@ -2,6 +2,24 @@ export interface DetailViewField {
   key: string;
   label: string;
   type?: 'text' | 'date' | 'currency' | 'badge';
+  /**
+   * Value -> label for a coded field. Supply this whenever the stored value is a
+   * code rather than prose, or the view renders the raw code.
+   */
+  options?: { value: string; label: string }[];
+  /**
+   * `badge` only. Value -> goa-badge type. Unmapped values render neutral.
+   */
+  badgeMap?: Record<
+    string,
+    | 'information'
+    | 'success'
+    | 'important'
+    | 'emergency'
+    | 'dark'
+    | 'midtone'
+    | 'light'
+  >;
 }
 
 export interface Schema {

package/src/generators/vue-detail-view/schema.json

@@ -25,7 +25,7 @@
     },
     "resource": {
       "type": "string",
-      "description": "API resource path segment -- the view fetches /api/<resource>/:id."
+      "description": "API resource path segment -- the view fetches /api/v1/<resource>/:id."
     },
     "route": {
       "type": "string",
@@ -33,7 +33,7 @@
     },
     "fields": {
       "type": "string",
-      "description": "JSON array of fields rendered in the record's info list, in display order -- e.g. '[{\"key\":\"status\",\"label\":\"Status\",\"type\":\"badge\"}]'. Each item: { key, label, type?: \"text\"|\"date\"|\"currency\"|\"badge\" (default \"text\") }. A plain array is also accepted when this generator is invoked programmatically. Nx's CLI option coercion only supports comma-separated primitive lists for array-typed schema properties, not JSON -- a JSON string is the only CLI syntax that actually survives Nx's own arg parsing for a structured list like this."
+      "description": "JSON array of fields rendered in the record's info list, in display order -- e.g. '[{\"key\":\"status\",\"label\":\"Status\",\"type\":\"badge\"}]'. Each item: { key, label, type?: \"text\"|\"date\"|\"currency\"|\"badge\" (default \"text\"), options?: [{value,label}], badgeMap?: {value: badgeType} }. Supply `options` for any field whose stored value is a code, or the view renders the raw code. Supply `badgeMap` on a `badge` field to give each status its colour; unmapped values render neutral. A plain array is also accepted when this generator is invoked programmatically. Nx's CLI option coercion only supports comma-separated primitive lists for array-typed schema properties, not JSON -- a JSON string is the only CLI syntax that actually survives Nx's own arg parsing for a structured list like this."
     },
     "heading": {
       "type": "string",

package/src/generators/vue-detail-view/vue-detail-view.js

@@ -38,7 +38,10 @@ function default_1(host, options) {
         // Idempotent -- ensures RecordDetailShell exists even in a project scaffolded
         // before vue-components carried it.
         yield (0, vue_components_1.default)(host);
-        (0, devkit_1.generateFiles)(host, path.join(__dirname, 'files'), normalizedOptions.projectRoot, Object.assign(Object.assign({}, normalizedOptions), { goaImportPath: (0, vue_components_1.vueComponentsImportPath)(host), tmpl: '' }));
+        (0, devkit_1.generateFiles)(host, path.join(__dirname, 'files'), normalizedOptions.projectRoot, Object.assign(Object.assign({}, normalizedOptions), { goaImportPath: (0, vue_components_1.vueComponentsImportPath)(host), 
+            // Derived here, not tested inline: EJS throws a ReferenceError on a bare
+            // undefined variable, so a flag the template reads must always be defined.
+            hasCodedFields: normalizedOptions.fields.some((field) => { var _a; return (_a = field.options) === null || _a === void 0 ? void 0 : _a.length; }), hasBadgeFields: normalizedOptions.fields.some((field) => field.type === 'badge'), tmpl: '' }));
         (0, vue_router_1.insertVueRoute)(host, normalizedOptions.projectRoot, normalizedOptions.project, {
             path: normalizedOptions.route,
             componentImportPath: `../views/${normalizedOptions.viewFileName}.vue`,

package/src/generators/vue-detail-view/vue-detail-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"vue-detail-view.js","sourceRoot":"","sources":["../../../../../../packages/nx-adsp/src/generators/vue-detail-view/vue-detail-view.ts"],"names":[],"mappings":";;AAqDA,4BAyBC;;AA9ED,uCAMoB;AACpB,6BAA6B;AAC7B,uDAAwD;AACxD,qEAE0C;AAG1C,6EAA6E;AAC7E,4EAA4E;AAC5E,4EAA4E;AAC5E,6EAA6E;AAC7E,0EAA0E;AAC1E,6EAA6E;AAC7E,iEAAiE;AACjE,SAAS,WAAW,CAAC,MAAwB;IAC3C,MAAM,MAAM,GAAG,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;IACxE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAClD,MAAM,IAAI,KAAK,CACb,2EAA2E,CAC5E,CAAC;IACJ,CAAC;IACD,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,SAAS,gBAAgB,CAAC,IAAU,EAAE,OAAe;;IACnD,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,IAAA,iCAAwB,EAAC,IAAI,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;IAE9E,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;QACnC,MAAM,IAAI,KAAK,CACb,YAAY,OAAO,CAAC,KAAK,qFAAqF,CAC/G,CAAC;IACJ,CAAC;IAED,MAAM,SAAS,GAAG,IAAA,cAAK,EAAC,OAAO,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC;IAChD,uCACK,OAAO,KACV,WAAW,EACX,MAAM,EAAE,WAAW,CAAC,OAAO,CAAC,MAAM,CAAC,EACnC,YAAY,EAAE,GAAG,SAAS,MAAM;QAChC,2EAA2E;QAC3E,mDAAmD;QACnD,OAAO,EAAE,MAAA,OAAO,CAAC,OAAO,mCAAI,SAAS,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,IAAI,EAAE,EACvE,YAAY,EAAE,MAAA,OAAO,CAAC,YAAY,mCAAI,IAAI,IAC1C;AACJ,CAAC;AAED,mBAA+B,IAAU,EAAE,OAAe;;QACxD,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAE1D,8EAA8E;QAC9E,oCAAoC;QACpC,MAAM,IAAA,wBAAsB,EAAC,IAAI,CAAC,CAAC;QAEnC,IAAA,sBAAa,EACX,IAAI,EACJ,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,EAC7B,iBAAiB,CAAC,WAAW,kCAExB,iBAAiB,KACpB,aAAa,EAAE,IAAA,wCAAuB,EAAC,IAAI,CAAC,EAC5C,IAAI,EAAE,EAAE,IAEX,CAAC;QAEF,IAAA,2BAAc,EAAC,IAAI,EAAE,iBAAiB,CAAC,WAAW,EAAE,iBAAiB,CAAC,OAAO,EAAE;YAC7E,IAAI,EAAE,iBAAiB,CAAC,KAAK;YAC7B,mBAAmB,EAAE,YAAY,iBAAiB,CAAC,YAAY,MAAM;YACrE,YAAY,EAAE,iBAAiB,CAAC,YAAY;SAC7C,CAAC,CAAC;QAEH,MAAM,IAAA,oBAAW,EAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;CAAA"}
+{"version":3,"file":"vue-detail-view.js","sourceRoot":"","sources":["../../../../../../packages/nx-adsp/src/generators/vue-detail-view/vue-detail-view.ts"],"names":[],"mappings":";;AAqDA,4BAsCC;;AA3FD,uCAMoB;AACpB,6BAA6B;AAC7B,uDAAwD;AACxD,qEAE0C;AAG1C,6EAA6E;AAC7E,4EAA4E;AAC5E,4EAA4E;AAC5E,6EAA6E;AAC7E,0EAA0E;AAC1E,6EAA6E;AAC7E,iEAAiE;AACjE,SAAS,WAAW,CAAC,MAAwB;IAC3C,MAAM,MAAM,GAAG,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;IACxE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAClD,MAAM,IAAI,KAAK,CACb,2EAA2E,CAC5E,CAAC;IACJ,CAAC;IACD,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,SAAS,gBAAgB,CAAC,IAAU,EAAE,OAAe;;IACnD,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,IAAA,iCAAwB,EAAC,IAAI,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;IAE9E,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;QACnC,MAAM,IAAI,KAAK,CACb,YAAY,OAAO,CAAC,KAAK,qFAAqF,CAC/G,CAAC;IACJ,CAAC;IAED,MAAM,SAAS,GAAG,IAAA,cAAK,EAAC,OAAO,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC;IAChD,uCACK,OAAO,KACV,WAAW,EACX,MAAM,EAAE,WAAW,CAAC,OAAO,CAAC,MAAM,CAAC,EACnC,YAAY,EAAE,GAAG,SAAS,MAAM;QAChC,2EAA2E;QAC3E,mDAAmD;QACnD,OAAO,EAAE,MAAA,OAAO,CAAC,OAAO,mCAAI,SAAS,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,IAAI,EAAE,EACvE,YAAY,EAAE,MAAA,OAAO,CAAC,YAAY,mCAAI,IAAI,IAC1C;AACJ,CAAC;AAED,mBAA+B,IAAU,EAAE,OAAe;;QACxD,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAE1D,8EAA8E;QAC9E,oCAAoC;QACpC,MAAM,IAAA,wBAAsB,EAAC,IAAI,CAAC,CAAC;QAEnC,IAAA,sBAAa,EACX,IAAI,EACJ,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,EAC7B,iBAAiB,CAAC,WAAW,kCAExB,iBAAiB,KACpB,aAAa,EAAE,IAAA,wCAAuB,EAAC,IAAI,CAAC;YAC5C,yEAAyE;YACzE,2EAA2E;YAC3E,cAAc,EAAE,iBAAiB,CAAC,MAAM,CAAC,IAAI,CAC3C,CAAC,KAAK,EAAE,EAAE,WAAC,OAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,MAAM,CAAA,EAAA,CACjC,EACD,cAAc,EAAE,iBAAiB,CAAC,MAAM,CAAC,IAAI,CAC3C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,CAClC,EACD,IAAI,EAAE,EAAE,IAEX,CAAC;QAEF,IAAA,2BAAc,EACZ,IAAI,EACJ,iBAAiB,CAAC,WAAW,EAC7B,iBAAiB,CAAC,OAAO,EACzB;YACE,IAAI,EAAE,iBAAiB,CAAC,KAAK;YAC7B,mBAAmB,EAAE,YAAY,iBAAiB,CAAC,YAAY,MAAM;YACrE,YAAY,EAAE,iBAAiB,CAAC,YAAY;SAC7C,CACF,CAAC;QAEF,MAAM,IAAA,oBAAW,EAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;CAAA"}

package/src/generators/vue-detail-view/vue-detail-view.spec.ts

@@ -102,19 +102,23 @@ describe('Vue Detail View Generator', () => {
       .read('apps/test/src/views/ApplicationDetailView.vue')
       .toString();
     expect(view).toContain('heading="Application Detail"');
-    expect(view).toContain("await get('applications', String(route.params.id))");
+    expect(view).toContain(
+      "await get('applications', String(route.params.id))",
+    );
     expect(view).not.toContain('apiFetch');
 
     // Vue Router reuses this component across an id-only change, so the fetch
     // is driven by a watch rather than onMounted.
-    expect(view).toContain("watch(() => route.params.id, load, { immediate: true })");
+    expect(view).toContain(
+      'watch(() => route.params.id, load, { immediate: true })',
+    );
     expect(view).not.toContain('onMounted(');
     expect(view).not.toContain('function formatCurrency');
 
     expect(view).toContain('formatDate');
     expect(view).not.toContain('function formatDate');
     expect(view).toContain(
-      "<goa-badge type=\"information\" :content=\"String(record['status'] ?? '—')\" />",
+      "badgeType(fieldBadgeTypes['status'], record['status'])",
     );
     // A type: 'date' column is a calendar date -- formatDate, not
     // formatDateTime, which would show an invented midnight.
@@ -168,9 +172,7 @@ describe('Vue Detail View Generator', () => {
   it('ensures the shared RecordDetailShell pattern component exists', async () => {
     await generator(host, baseOptions);
     expect(
-      host.exists(
-        'libs/vue-components/src/lib/patterns/RecordDetailShell.vue',
-      ),
+      host.exists('libs/vue-components/src/lib/patterns/RecordDetailShell.vue'),
     ).toBeTruthy();
   }, 30000);
 
@@ -180,4 +182,32 @@ describe('Vue Detail View Generator', () => {
     const after = readProjectConfiguration(host, 'test');
     expect(after).toEqual(before);
   }, 30000);
+
+  it('maps badge values to semantic types and renders coded fields as labels', async () => {
+    await generator(host, {
+      ...baseOptions,
+      fields: [
+        {
+          key: 'status',
+          label: 'Status',
+          type: 'badge',
+          badgeMap: { declined: 'emergency' },
+        },
+        {
+          key: 'region',
+          label: 'Region',
+          options: [{ value: 'northwest', label: 'North west' }],
+        },
+      ],
+    });
+    const view = host
+      .read('apps/test/src/views/ApplicationDetailView.vue')
+      .toString();
+    // Quote style depends on whether formatFiles ran, so match the pair.
+    expect(view).toMatch(/["']?declined["']?\s*:\s*["']emergency["']/);
+    expect(view).toContain("badgeType(fieldBadgeTypes['status']");
+    expect(view).toContain(
+      "optionLabel(fieldOptions['region'], record['region'])",
+    );
+  }, 30000);
 });

package/src/generators/vue-intake-view/files/shared/src/views/__confirmationViewFileName__.vue__tmpl__

@@ -1,20 +1,74 @@
 <script setup lang="ts">
+import { ref, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
+import { useApi } from '../composables/useApi';
 
 const route = useRoute();
+const { get } = useApi();
+
+// The confirmation page fetches the submitted record rather than reading the id
+// out of the route, so it can show the business reference the person will quote
+// back to us. The route id is a storage detail -- presenting it as "your
+// reference number" hands them a number that means nothing to anyone they later
+// talk to.
+const record = ref<Record<string, unknown> | null>(null);
+const loading = ref(true);
+
+// Falls back to the route id only when the record has no reference field, so the
+// page still shows something actionable rather than a blank.
+const reference = ref(String(route.params.id ?? ''));
+
+onMounted(async () => {
+  try {
+    const id = String(route.params.id ?? '');
+    record.value = (await get('<%- resource %>', id)) as Record<string, unknown>;
+    const value = record.value?.['<%- referenceField %>'];
+    if (value !== null && value !== undefined && value !== '') {
+      reference.value = String(value);
+    }
+  } catch {
+    // A failed lookup must not blank the confirmation: the submission already
+    // succeeded, and the route id is still a usable fallback reference.
+  } finally {
+    loading.value = false;
+  }
+});
 </script>
 
 <template>
   <div>
-    <goa-callout type="success" heading="Submitted">
-      <p>
-        Your reference number is <strong>{{ route.params.id }}</strong>. Keep this for your
-        records.
-      </p>
+    <goa-callout type="success" heading="<%- heading %> submitted">
+      <h1 class="confirmation-reference">
+        Your reference number is
+        <strong>{{ loading ? '…' : reference }}</strong>
+      </h1>
+      <p>Keep this for your records. You'll need it to check on your submission.</p>
     </goa-callout>
 
+    <goa-spacer vspacing="l" />
+
+    <h2>What happens next</h2>
+    <ol>
+      <li>We'll review what you submitted.</li>
+      <li>We'll contact you if we need anything further.</li>
+      <li>We'll let you know the outcome.</li>
+    </ol>
+
     <goa-spacer vspacing="m" />
 
-    <p>You'll be notified of any updates. No further action is needed right now.</p>
+    <router-link to="/">
+      <goa-button type="secondary">Return to the start</goa-button>
+    </router-link>
   </div>
 </template>
+
+<style scoped>
+/* The reference is the page's heading in the GDS confirmation pattern -- an h1
+   for landmark/screen-reader order, sized to sit inside the callout rather than
+   at page-title scale. */
+.confirmation-reference {
+  font-size: var(--goa-typography-heading-m-font-size, 1.25rem);
+  line-height: var(--goa-typography-heading-m-line-height, 1.5);
+  margin: 0 0 var(--goa-space-s, 0.75rem);
+}
+</style>

package/src/generators/vue-intake-view/files/shared/src/views/__reviewViewFileName__.vue__tmpl__

@@ -5,11 +5,30 @@ import { GoabCheckbox } from '<%= goaImportPath %>';
 <% if (steps.some((s) => s.fields.some((f) => f.type === 'date'))) { -%>
 import { formatDate } from '<%= goaImportPath %>';
 <% } -%>
+<% if (hasCodedFields) { -%>
+import { optionLabel } from '<%= goaImportPath %>';
+import type { DisplayOption } from '<%= goaImportPath %>';
+<% } -%>
 import { useApi } from '../composables/useApi';
 
 const route = useRoute();
 const router = useRouter();
 const { get, action } = useApi();
+<% if (hasCodedFields) { -%>
+
+// Value -> label for every coded field across the steps. Check-your-answers is
+// where this matters most: the page exists so the person can read back what they
+// entered, and a stored code ('cattle-mature', 'northwest') is not that.
+const fieldOptions: Record<string, DisplayOption[]> = {
+<% steps.forEach(function (step) { -%>
+<% step.fields.forEach(function (field) { -%>
+<% if (field.options && field.options.length) { -%>
+  '<%- field.key %>': <%- JSON.stringify(field.options) %>,
+<% } -%>
+<% }); -%>
+<% }); -%>
+};
+<% } -%>
 
 const idParam = computed(() => String(route.params.id ?? ''));
 
@@ -84,6 +103,8 @@ async function onSubmit() {
           <dt><%- field.label %></dt>
 <% if (field.type === 'date') { -%>
           <dd>{{ formatDate(record['<%- field.key %>']) }}</dd>
+<% } else if (field.options && field.options.length) { -%>
+          <dd>{{ optionLabel(fieldOptions['<%- field.key %>'], record['<%- field.key %>']) }}</dd>
 <% } else { -%>
           <dd>{{ record['<%- field.key %>'] ?? '—' }}</dd>
 <% } -%>

package/src/generators/vue-intake-view/schema.d.ts

@@ -24,6 +24,14 @@ export interface Schema {
    * programmatic callers (e.g. tests).
    */
   steps: string | IntakeViewStep[];
+  /**
+   * Field on the submitted record holding the business reference shown on the
+   * confirmation page, e.g. `reference`. Defaults to `reference`; falls back to
+   * the route id when the record has no such field.
+   */
+  referenceField?: string;
+  /** Human title used in headings, e.g. "Compensation claim". */
+  heading?: string;
   requiresAuth?: boolean;
 }
 
@@ -31,6 +39,8 @@ export interface NormalizedSchema extends Omit<Schema, 'steps'> {
   projectRoot: string;
   steps: IntakeViewStep[];
   requiresAuth: boolean;
+  referenceField: string;
+  heading: string;
   /** PascalCase base name, e.g. "Application" for --name application. */
   baseName: string;
 }

package/src/generators/vue-intake-view/schema.json

@@ -2,7 +2,7 @@
   "$schema": "http://json-schema.org/schema",
   "id": "NxAdspVueIntakeView",
   "title": "Vue Multi-Step Intake View",
-  "description": "Generates a route-per-step intake wizard (Stepper + StepErrorSummary, a required read-only review step, and a confirmation page) into an existing vue-app project. Cross-step state is server-persisted -- each step PUTs/POSTs to /api/<resource>/:id and refetches on mount; there's no client-side draft caching.",
+  "description": "Generates a route-per-step intake wizard (Stepper + StepErrorSummary, a required read-only review step, and a confirmation page) into an existing vue-app project. Cross-step state is server-persisted -- each step PUTs/POSTs to /api/v1/<resource>/:id and refetches on mount; there's no client-side draft caching.",
   "type": "object",
   "properties": {
     "project": {
@@ -25,7 +25,7 @@
     },
     "resource": {
       "type": "string",
-      "description": "API resource path segment. Each step fetches/saves /api/<resource>/:id; the review step's Submit posts /api/<resource>/:id/submit."
+      "description": "API resource path segment. Each step fetches/saves /api/v1/<resource>/:id; the review step's Submit posts /api/v1/<resource>/:id/submit."
     },
     "route": {
       "type": "string",
@@ -39,14 +39,17 @@
       "type": "boolean",
       "description": "Whether the generated routes require authentication.",
       "default": true
+    },
+    "referenceField": {
+      "type": "string",
+      "description": "Field on the submitted record holding the business reference shown on the confirmation page, e.g. 'reference'. The confirmation fetches the record and displays this rather than the route id -- an internal id presented as a reference number is meaningless to the person quoting it back. Falls back to the route id when the record has no such field.",
+      "default": "reference"
+    },
+    "heading": {
+      "type": "string",
+      "description": "Human title used in the confirmation heading, e.g. 'Compensation claim'. Defaults to the class-cased --name."
     }
   },
-  "required": [
-    "project",
-    "name",
-    "resource",
-    "route",
-    "steps"
-  ],
+  "required": ["project", "name", "resource", "route", "steps"],
   "additionalProperties": false
 }

package/src/generators/vue-intake-view/vue-intake-view.js

@@ -28,9 +28,12 @@ function parseSteps(steps) {
     return parsed;
 }
 function normalizeOptions(host, options) {
-    var _a;
+    var _a, _b, _c;
     const { root: projectRoot } = (0, devkit_1.readProjectConfiguration)(host, options.project);
-    return Object.assign(Object.assign({}, options), { projectRoot, steps: parseSteps(options.steps), requiresAuth: (_a = options.requiresAuth) !== null && _a !== void 0 ? _a : true, baseName: (0, devkit_1.names)(options.name).className });
+    return Object.assign(Object.assign({}, options), { projectRoot, steps: parseSteps(options.steps), requiresAuth: (_a = options.requiresAuth) !== null && _a !== void 0 ? _a : true, referenceField: (_b = options.referenceField) !== null && _b !== void 0 ? _b : 'reference', 
+        // Sentence-case the name for prose headings ("claim" -> "Claim"), so the
+        // confirmation reads as a service page rather than repeating a slug.
+        heading: (_c = options.heading) !== null && _c !== void 0 ? _c : (0, devkit_1.names)(options.name).className, baseName: (0, devkit_1.names)(options.name).className });
 }
 // PascalCase view name for a step, e.g. "personal-info" -> "PersonalInfoStepView".
 function stepViewFileName(stepKey) {
@@ -61,7 +64,10 @@ function default_1(host, options) {
         });
         (0, devkit_1.generateFiles)(host, path.join(__dirname, 'files/shared'), projectRoot, Object.assign(Object.assign({}, normalizedOptions), { goaImportPath,
             reviewViewFileName,
-            confirmationViewFileName, tmpl: '' }));
+            confirmationViewFileName, 
+            // Derived here, not tested inline: EJS throws a ReferenceError on a bare
+            // undefined variable, so a flag the template reads must always be defined.
+            hasCodedFields: steps.some((step) => step.fields.some((field) => { var _a; return (_a = field.options) === null || _a === void 0 ? void 0 : _a.length; })), tmpl: '' }));
         // Registered in reverse so the final router file lists steps in forward
         // order (each insertVueRoute call adds right after `routes: [`, pushing
         // earlier insertions down).

package/src/generators/vue-intake-view/vue-intake-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"vue-intake-view.js","sourceRoot":"","sources":["../../../../../../packages/nx-adsp/src/generators/vue-intake-view/vue-intake-view.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"vue-intake-view.js","sourceRoot":"","sources":["../../../../../../packages/nx-adsp/src/generators/vue-intake-view/vue-intake-view.ts"],"names":[],"mappings":"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"}

package/src/generators/vue-intake-view/vue-intake-view.spec.ts

@@ -92,8 +92,12 @@ describe('Vue Intake View Generator', () => {
     expect(step1).toContain(
       "import { Stepper, StepErrorSummary, GoabInput } from '@proj/vue-components';",
     );
-    expect(step1).toContain("{ key: 'personal-info', label: 'Personal information' }");
-    expect(step1).toContain("{ key: 'contact-info', label: 'Contact information' }");
+    expect(step1).toContain(
+      "{ key: 'personal-info', label: 'Personal information' }",
+    );
+    expect(step1).toContain(
+      "{ key: 'contact-info', label: 'Contact information' }",
+    );
     // Own step is 'incomplete' when active and not yet completed, per the real
     // goa-form-step status enum (complete/incomplete/not-started -- no "current").
     expect(step1).toContain("step.key === 'personal-info'");
@@ -125,13 +129,19 @@ describe('Vue Intake View Generator', () => {
   it('generates a review view listing every step with an Edit link, and a declaration gate on Submit', async () => {
     await generator(host, baseOptions);
 
-    const review = host.read('apps/test/src/views/ApplicationReviewView.vue').toString();
+    const review = host
+      .read('apps/test/src/views/ApplicationReviewView.vue')
+      .toString();
     expect(review).toContain("editStep('personal-info')");
     expect(review).toContain("editStep('contact-info')");
     expect(review).toContain("record['fullName'] ?? '—'");
     expect(review).toContain("record['email'] ?? '—'");
-    expect(review).toContain(':disabled="!declared || submitting || undefined"');
-    expect(review).toContain("await action('applications', idParam.value, 'submit')");
+    expect(review).toContain(
+      ':disabled="!declared || submitting || undefined"',
+    );
+    expect(review).toContain(
+      "await action('applications', idParam.value, 'submit')",
+    );
     expect(review).not.toContain('apiFetch');
     expect(review).toContain('watch(idParam, load, { immediate: true })');
     expect(review).not.toContain('onMounted(');
@@ -175,8 +185,12 @@ describe('Vue Intake View Generator', () => {
       const step = host
         .read('apps/test/src/views/DetailsStepView.vue')
         .toString();
-      expect(step).toContain("count: form.count === '' ? null : Number(form.count)");
-      expect(step).toContain('occurred: toIsoDateString(form.occurred) || null');
+      expect(step).toContain(
+        "count: form.count === '' ? null : Number(form.count)",
+      );
+      expect(step).toContain(
+        'occurred: toIsoDateString(form.occurred) || null',
+      );
       expect(step).toContain("fromIsoDateString(data['occurred'])");
     });
 
@@ -210,12 +224,39 @@ describe('Vue Intake View Generator', () => {
     });
   });
 
-  it('generates a confirmation view showing the reference number', async () => {
+  // The previous version of this test asserted `{{ route.params.id }}` -- it
+  // encoded the defect rather than the requirement, so the confirmation page
+  // shipped presenting the storage id as "your reference number" ("Your
+  // reference number is 1001" in a real build).
+  it('generates a confirmation view showing the business reference, not the route id', async () => {
+    await generator(host, baseOptions);
+    const confirmation = host
+      .read('apps/test/src/views/ApplicationConfirmationView.vue')
+      .toString();
+    // Fetches the record and reads the reference field off it.
+    expect(confirmation).toContain("record.value?.['reference']");
+    expect(confirmation).toContain("{{ loading ? '…' : reference }}");
+    // The route id survives only as a fallback, never as the presented value.
+    expect(confirmation).not.toContain('{{ route.params.id }}');
+  }, 30000);
+
+  it('honours --referenceField', async () => {
+    await generator(host, { ...baseOptions, referenceField: 'claimNumber' });
+    expect(
+      host
+        .read('apps/test/src/views/ApplicationConfirmationView.vue')
+        .toString(),
+    ).toContain("record.value?.['claimNumber']");
+  }, 30000);
+
+  it('gives the confirmation page an h1 and a route out of the flow', async () => {
     await generator(host, baseOptions);
     const confirmation = host
       .read('apps/test/src/views/ApplicationConfirmationView.vue')
       .toString();
-    expect(confirmation).toContain('{{ route.params.id }}');
+    expect(confirmation).toContain('<h1');
+    expect(confirmation).toContain('What happens next');
+    expect(confirmation).toContain('<router-link to="/">');
   }, 30000);
 
   it('inserts a route for every step plus review and confirmation, requiring auth by default', async () => {
@@ -235,9 +276,7 @@ describe('Vue Intake View Generator', () => {
     expect(routerTs).toContain(
       "component: () => import('../views/ApplicationConfirmationView.vue')",
     );
-    expect(
-      routerTs.split('requiresAuth: true').length - 1,
-    ).toBe(4);
+    expect(routerTs.split('requiresAuth: true').length - 1).toBe(4);
     // The existing route is untouched, not replaced.
     expect(routerTs).toContain("{ path: '/', component: HomeView }");
   }, 30000);
@@ -274,4 +313,34 @@ describe('Vue Intake View Generator', () => {
     const after = readProjectConfiguration(host, 'test');
     expect(after).toEqual(before);
   }, 30000);
+
+  // The check-your-answers page exists so the person can read back what they
+  // entered; a stored code ('cattle-mature', 'northwest') is not that. The
+  // generator is handed the label for every option and used to discard it.
+  it('renders coded answers as labels on the review page', async () => {
+    await generator(host, {
+      ...baseOptions,
+      steps: [
+        {
+          key: 'losses',
+          label: 'Losses',
+          fields: [
+            {
+              key: 'species',
+              label: 'Species',
+              type: 'select',
+              options: [{ value: 'cattle-mature', label: 'Cattle (mature)' }],
+            },
+          ],
+        },
+      ],
+    });
+    const review = host
+      .read('apps/test/src/views/ApplicationReviewView.vue')
+      .toString();
+    expect(review).toContain(
+      "optionLabel(fieldOptions['species'], record['species'])",
+    );
+    expect(review).toContain('Cattle (mature)');
+  }, 30000);
 });

package/src/generators/vue-workspace-view/files/src/views/__viewFileName__.vue__tmpl__

@@ -7,7 +7,23 @@ import {
 <% } -%>
   formatCurrency,
   formatDate,
+<% if (hasCodedColumns || hasBadgeColumns) { -%>
+  optionLabel,
+<% } -%>
+<% if (hasBadgeColumns) { -%>
+  badgeType,
+<% } -%>
+} from '<%= goaImportPath %>';
+<% if (hasCodedColumns || hasBadgeColumns) { -%>
+import type {
+<% if (hasCodedColumns || hasBadgeColumns) { -%>
+  DisplayOption,
+<% } -%>
+<% if (hasBadgeColumns) { -%>
+  BadgeType,
+<% } -%>
 } from '<%= goaImportPath %>';
+<% } -%>
 import { useApi } from '../composables/useApi';
 
 const { list } = useApi();
@@ -17,6 +33,31 @@ const columns = [
   { key: '<%= column.key %>', label: '<%= column.label %>', sortable: <%= !!column.sortable %> },
 <% }); -%>
 ];
+<% if (hasCodedColumns || hasBadgeColumns) { -%>
+
+// Value -> label for coded columns, so the table shows 'Cattle (mature)' rather
+// than the stored 'cattle-mature'. Keyed by column so one lookup covers them all.
+const columnOptions: Record<string, DisplayOption[]> = {
+<% columns.forEach(function (column) { -%>
+<% if (column.options && column.options.length) { -%>
+  '<%= column.key %>': <%- JSON.stringify(column.options) %>,
+<% } -%>
+<% }); -%>
+};
+<% } -%>
+<% if (hasBadgeColumns) { -%>
+
+// Value -> badge type, so a status carries the right colour. Anything unmapped
+// falls back to the neutral 'information' rather than being asserted as good or
+// bad.
+const columnBadgeTypes: Record<string, Record<string, BadgeType>> = {
+<% columns.forEach(function (column) { -%>
+<% if (column.type === 'badge') { -%>
+  '<%= column.key %>': <%- JSON.stringify(column.badgeMap || {}) %>,
+<% } -%>
+<% }); -%>
+};
+<% } -%>
 
 // The fetched rows' shape isn't known to this generator -- read fields
 // defensively rather than declaring (and likely getting wrong) a fake interface.
@@ -186,7 +227,14 @@ onUnmounted(() => {
 <% columns.forEach(function (column) { -%>
 <% if (column.type === 'badge') { -%>
       <template #cell-<%= column.key %>="{ row }">
-        <goa-badge type="information" :content="String(row['<%= column.key %>'] ?? '—')" />
+        <goa-badge
+          :type="badgeType(columnBadgeTypes['<%= column.key %>'], row['<%= column.key %>'])"
+          :content="optionLabel(columnOptions['<%= column.key %>'], row['<%= column.key %>'])"
+        />
+      </template>
+<% } else if (column.options && column.options.length) { -%>
+      <template #cell-<%= column.key %>="{ row }">
+        {{ optionLabel(columnOptions['<%= column.key %>'], row['<%= column.key %>']) }}
       </template>
 <% } else if (column.type === 'date') { -%>
       <template #cell-<%= column.key %>="{ row }">

package/src/generators/vue-workspace-view/schema.d.ts

@@ -3,6 +3,26 @@ export interface WorkspaceViewColumn {
   label: string;
   type?: 'text' | 'date' | 'currency' | 'badge';
   sortable?: boolean;
+  /**
+   * Value -> label for a coded column. Supply this whenever the stored value is
+   * a code rather than prose, or the table renders the raw code.
+   */
+  options?: { value: string; label: string }[];
+  /**
+   * `badge` only. Value -> goa-badge type, e.g.
+   * `{ approved: 'success', declined: 'emergency' }`. Unmapped values render
+   * neutral.
+   */
+  badgeMap?: Record<
+    string,
+    | 'information'
+    | 'success'
+    | 'important'
+    | 'emergency'
+    | 'dark'
+    | 'midtone'
+    | 'light'
+  >;
 }
 
 export interface WorkspaceViewFilter {
@@ -32,6 +52,8 @@ export interface Schema {
   heading?: string;
   pageSize?: number;
   filterable?: boolean;
+  /** Ionicon name for the side-menu entry. Defaults per generator. */
+  icon?: string;
   requiresAuth?: boolean;
 }