@7365admin1/layer-common 4.2.2-staging.263 → 4.2.2-staging.265

package/components/PublicOnboarding/ContractorRegistrationForm.vue

@@ -46,7 +46,7 @@
           label="Email"
           density="comfortable"
           variant="outlined"
-          hide-details
+          :rules="[emailRule]"
         />
       </v-col>
 
@@ -146,6 +146,15 @@
             hide-details
             class="mb-2"
           />
+          <v-text-field
+            v-model="member.email"
+            type="email"
+            label="Email"
+            density="comfortable"
+            variant="outlined"
+            :rules="[requiredRule, emailRule]"
+            class="mb-2"
+          />
           <InputPhoneNumberV2 v-model="member.contact" density="comfortable" hide-details class="mb-2" />
           <v-text-field
             v-model="member.plateNumber"
@@ -156,6 +165,10 @@
           />
         </div>
 
+        <v-alert v-if="membersError" type="error" variant="tonal" density="compact" class="mb-3">
+          {{ membersError }}
+        </v-alert>
+
         <v-btn variant="outlined" block class="mb-3" prepend-icon="mdi-plus" @click="addDraftMember">
           Add
         </v-btn>
@@ -166,6 +179,8 @@
 </template>
 
 <script lang="ts" setup>
+import { isLikelyEmail } from "../../utils/self-service-links";
+
 const prop = defineProps({
   site: { type: String, required: true },
 });
@@ -176,6 +191,10 @@ const { createVisitor } = usePublicVisitorOnboarding();
 const { isSupported: isContactPickerSupported, pickContact } = useContactPicker();
 
 const requiredRule = (v: any) => (v !== null && v !== undefined && v !== "") || "This field is required";
+// Optional, but if typed it has to be sendable - the API validates it with Joi
+// and would otherwise reject the whole submission with a message about a field
+// the visitor cannot see.
+const emailRule = (v: any) => !v || isLikelyEmail(v) || "Enter a valid email address";
 
 const contractorTypes = [
   { title: "Home Contractor", value: "home-contractor" },
@@ -199,25 +218,40 @@ const visitor = reactive({
   remarks: "",
 });
 
-type TDraftMember = { name: string; nric: string; contact: string; plateNumber: string };
+type TDraftMember = { name: string; nric: string; email: string; contact: string; plateNumber: string };
 const members = ref<TDraftMember[]>([]);
 const draftMembers = ref<TDraftMember[]>([]);
 const showMembersDialog = ref(false);
+const membersError = ref("");
 
 watch(showMembersDialog, (open) => {
   if (open) {
     draftMembers.value = members.value.length
       ? members.value.map((m) => ({ ...m }))
-      : [{ name: "", nric: "", contact: "", plateNumber: "" }];
+      : [{ name: "", nric: "", email: "", contact: "", plateNumber: "" }];
+    membersError.value = "";
   }
 });
 
 function addDraftMember() {
-  draftMembers.value.push({ name: "", nric: "", contact: "", plateNumber: "" });
+  draftMembers.value.push({ name: "", nric: "", email: "", contact: "", plateNumber: "" });
 }
 
 function saveMembers() {
-  members.value = draftMembers.value.filter((m) => m.name && m.contact);
+  // The members dialog is lazy (no `eager`), so its fields unmount when it
+  // closes and stop counting towards the form's own `formValid` - which is what
+  // gates Submit. Without this guard a malformed member address would sail past
+  // both, and the API would reject the entire submission with a Joi message
+  // naming a field the contractor can no longer see. Blank stays allowed: an
+  // email is optional per member, it just means no mail of their own.
+  const invalid = draftMembers.value.find((m) => m.email && !isLikelyEmail(m.email));
+  if (invalid) {
+    membersError.value = `Enter a valid email address for ${invalid.name || "this member"}, or leave it blank.`;
+    return;
+  }
+
+  membersError.value = "";
+  members.value = draftMembers.value.filter((m) => m.name && m.contact && m.email);
   showMembersDialog.value = false;
 }
 
@@ -256,6 +290,7 @@ async function submit() {
     const res: any = await createVisitor(prop.site, payload);
     emit("done", res?.status || "pending", res?._id, {
       name: visitor.name,
+      email: visitor.email,
       expectedCheckIn: visitor.expectedCheckIn,
       members: res?.members || [],
     });

package/components/PublicOnboarding/VisitorQrCodeLinksCard.vue

@@ -14,30 +14,59 @@
       Hi {{ leadName }}, here {{ members.length ? "are the check-in links for you and your team" : "is your check-in link" }}.
     </p>
 
-    <div class="link-row pa-3 mb-3">
-      <p class="text-body-2 font-weight-medium mb-2">{{ leadName }}</p>
-      <div class="d-flex ga-2">
-        <v-btn variant="outlined" color="error" size="small" class="flex-grow-1" @click="copyLink(leadLink)">
-          Copy Link
-        </v-btn>
-        <v-btn variant="outlined" color="error" size="small" class="flex-grow-1" :href="leadLink" target="_blank">
-          View Link
-        </v-btn>
-      </div>
-    </div>
+    <template v-for="(row, index) in rows" :key="row._id">
+      <p v-if="index === 1" class="text-caption text-medium-emphasis mb-2">Members</p>
+
+      <div class="link-row pa-3 mb-3">
+        <p class="text-body-2 font-weight-medium mb-2">{{ row.name }}</p>
 
-    <template v-if="members.length">
-      <p class="text-caption text-medium-emphasis mb-2">Members</p>
-      <div v-for="m in members" :key="m._id" class="link-row pa-3 mb-3">
-        <p class="text-body-2 font-weight-medium mb-2">{{ m.name }}</p>
         <div class="d-flex ga-2">
-          <v-btn variant="outlined" color="error" size="small" class="flex-grow-1" @click="copyLink(linkFor(m._id))">
+          <v-btn variant="outlined" color="error" size="small" class="flex-grow-1" @click="copyLink(linkFor(row._id))">
             Copy Link
           </v-btn>
-          <v-btn variant="outlined" color="error" size="small" class="flex-grow-1" :href="linkFor(m._id)" target="_blank">
+          <v-btn variant="outlined" color="error" size="small" class="flex-grow-1" :href="linkFor(row._id)" target="_blank">
             View Link
           </v-btn>
+          <v-btn
+            variant="outlined"
+            color="error"
+            size="small"
+            class="flex-grow-1"
+            :loading="resendState[row._id] === 'sending'"
+            :disabled="resendState[row._id] === 'sending'"
+            @click="onResend(row)"
+          >
+            {{ resendState[row._id] === "sent" ? "Sent" : "Resend" }}
+          </v-btn>
+        </div>
+
+        <div v-if="showEmailInput[row._id]" class="d-flex ga-2 mt-3 align-start">
+          <v-text-field
+            v-model="emailDrafts[row._id]"
+            type="email"
+            label="Email"
+            density="compact"
+            variant="outlined"
+            hide-details
+            :disabled="resendState[row._id] === 'sending'"
+            @keyup.enter="onResend(row)"
+          />
+          <v-btn
+            color="error"
+            variant="flat"
+            size="small"
+            class="mt-1"
+            :loading="resendState[row._id] === 'sending'"
+            :disabled="resendState[row._id] === 'sending' || !isLikelyEmail(emailDrafts[row._id])"
+            @click="onResend(row)"
+          >
+            Send
+          </v-btn>
         </div>
+
+        <p v-if="resendError[row._id]" class="text-caption text-error mt-2 mb-0">
+          {{ resendError[row._id] }}
+        </p>
       </div>
     </template>
 
@@ -46,27 +75,116 @@
     </v-btn>
 
     <v-snackbar v-model="copied" timeout="1800" location="bottom">Link copied</v-snackbar>
+    <v-snackbar v-model="resent" timeout="2400" location="bottom">Email sent</v-snackbar>
 
     <PublicOnboardingShareDialog v-model="showShare" :message="shareMessage" :link="leadLink" />
   </v-card>
 </template>
 
 <script lang="ts" setup>
+import { isLikelyEmail, needsEmailInput, passLink, type TPassRow } from "../../utils/self-service-links";
+
 const props = defineProps<{
   leadId: string;
   leadName: string;
+  leadEmail?: string | null;
   status: string;
   expectedCheckIn?: string | null;
-  members: { _id: string; name: string }[];
+  members: { _id: string; name: string; email?: string | null }[];
 }>();
 
+const { resendSelfServicePass } = usePublicVisitorOnboarding();
+
+/**
+ * Addresses typed into a row's inline field and accepted by the server. The
+ * props are a snapshot of the moment the group was created, so without this a
+ * row would keep asking for an address it has already been given.
+ */
+const sentEmails = ref<Record<string, string>>({});
+
+/**
+ * The lead and every member as one list - they get the identical row, and the
+ * lead is simply the first of them. Index 1 is where the "Members" caption
+ * goes.
+ */
+const rows = computed<TPassRow[]>(() =>
+  [
+    { _id: props.leadId, name: props.leadName, email: props.leadEmail ?? null },
+    ...props.members,
+  ].map((row) => ({ ...row, email: sentEmails.value[row._id] || row.email })),
+);
+
 function linkFor(id: string) {
   const origin = import.meta.client ? window.location.origin : "";
-  return `${origin}/public-view/visitor-onboarding/pass/${id}`;
+  return passLink(origin, id);
 }
 
 const leadLink = computed(() => linkFor(props.leadId));
 
+const resendState = reactive<Record<string, "idle" | "sending" | "sent">>({});
+const resendError = reactive<Record<string, string>>({});
+const emailDrafts = reactive<Record<string, string>>({});
+const showEmailInput = reactive<Record<string, boolean>>({});
+const resent = ref(false);
+
+/**
+ * One button, two jobs. A row that already has an address just sends. A row
+ * that has none opens its inline field first, and the second press - or Enter
+ * in the field - is the one that sends what was typed.
+ */
+async function onResend(row: TPassRow) {
+  // The inline Send button and the Enter key both land here, and neither is
+  // gone from the DOM while a send is in flight. Without this, a double press
+  // fires two requests for one row: the second reliably trips the server's own
+  // cooldown (it is stamped before the send), and if it settles last it
+  // overwrites a successful send with a cooldown error the visitor cannot act on.
+  if (resendState[row._id] === "sending") return;
+
+  const draft = String(emailDrafts[row._id] ?? "").trim();
+
+  if (needsEmailInput(row) && !isLikelyEmail(draft)) {
+    showEmailInput[row._id] = true;
+    resendError[row._id] = "";
+    return;
+  }
+
+  resendError[row._id] = "";
+  resendState[row._id] = "sending";
+
+  try {
+    // Only sent for a row with no address of its own - the server refuses to
+    // redirect one that has, so there is nothing to gain by sending it anyway.
+    await resendSelfServicePass(row._id, needsEmailInput(row) ? draft : undefined);
+    resendState[row._id] = "sent";
+    // "Sent" is a moment-in-time confirmation, not a permanent state - the
+    // button still works on a later press, so it must not be stuck reading
+    // "Sent" for the rest of the page's life. Guarded: a later press may have
+    // already moved the row on to "sending" by the time this fires.
+    setTimeout(() => {
+      if (resendState[row._id] === "sent") resendState[row._id] = "idle";
+    }, 3000);
+    if (needsEmailInput(row)) {
+      sentEmails.value = { ...sentEmails.value, [row._id]: draft };
+      showEmailInput[row._id] = false;
+    }
+    resent.value = true;
+  } catch (error: any) {
+    resendState[row._id] = "idle";
+    const statusCode = error?.statusCode ?? error?.response?.status;
+    // The server's own words: the cooldown says how many seconds are left, and
+    // a rejected address says so. Both are written to be read by a visitor.
+    // The per-IP limiter's 429 is the one response here with no JSON body -
+    // it answers plain text, so `error.message` would otherwise put the raw
+    // "[POST] ... 429 Too Many Requests" fetch error on the row.
+    resendError[row._id] =
+      error?.data?.message ||
+      (statusCode === 429
+        ? "Too many attempts. Please wait a moment and try again."
+        : error?.message) ||
+      "Unable to send that email. Please try again.";
+  }
+}
+
 const arrivalDateDisplay = computed(() => {
   if (!props.expectedCheckIn) return "";
   const d = new Date(props.expectedCheckIn);

package/components/VehicleForm.vue

@@ -327,7 +327,15 @@
         Back to Selection
       </AppButton>
       <AppButton v-else variant="ghost" @click="close">Close</AppButton>
-      <AppButton :disabled="!validForm || processing" @click="submit">
+      <!--
+        NOT disabled on `validForm`. It used to be, and on a record with no
+        Block/Level/Unit - which exist, e.g. BEN21 on staging - the Update
+        button was simply dead: Vuetify does not mark a field invalid until it
+        has been validated, so there was no red field, no message, and no way
+        to find out why. The click now runs the validation, which paints every
+        offending field and writes the reason above.
+      -->
+      <AppButton :disabled="processing" @click="submit">
         {{ prop.mode == "add" ? "Submit" : "Update" }}
       </AppButton>
     </div>
@@ -751,6 +759,18 @@ function showMessage(msg: string, color: string) {
 
 async function submit() {
   errorMessage.value = "";
+
+  // Ask the form first. `validate()` marks each failing field, so the person
+  // filling it in can see WHICH details are missing rather than meeting a
+  // button that does nothing.
+  const result = await (formRef.value as any)?.validate?.();
+  if (result && result.valid === false) {
+    errorMessage.value =
+      "Some required details are missing or not valid. The fields marked in " +
+      "red above need to be filled in before this can be saved.";
+    return;
+  }
+
   processing.value = true;
   try {
     const SPTVal = vehicle?.seasonPassType as string;
@@ -828,19 +848,26 @@ async function submit() {
       };
     }
 
+    // Say what the SERVER says happened, not a hardcoded sentence. The server
+    // reports whether the plate actually reached an ANPR camera - a site whose
+    // camera is switched off saves the vehicle but registers nothing, and this
+    // used to announce "Vehicle added successfully." over the top of that.
     if (prop.mode === "add") {
-      await addVehicle(payload);
-      showMessage("Vehicle added successfully.", "success");
+      const res: any = await addVehicle(payload);
+      showMessage(res?.data || res?.message || "Vehicle added successfully.", "success");
     } else if (prop.mode === "edit") {
       const plateNumberId = prop.plateNumberId as string;
-      await updateVehicle(plateNumberId, payload);
-      showMessage("Vehicle updated successfully.", "success");
+      const res: any = await updateVehicle(plateNumberId, payload);
+      showMessage(res?.data || res?.message || "Vehicle updated successfully.", "success");
     }
     emit("done");
   } catch (error: any) {
-    const err = error?.data?.message;
+    // A refused create is fail-closed on the server and its message names the
+    // camera that would not take the plate. `$fetch` puts it on `data`, `ofetch`
+    // on `response._data`; reading only one of them dropped the reason.
     errorMessage.value =
-      err ||
+      error?.data?.message ||
+      error?.response?._data?.message ||
       `Failed to ${
         prop.mode === "add" ? "add" : "update"
       } vehicle. Please try again.`;
@@ -1023,7 +1050,6 @@ function handleCloseMatchDialog() {
 
 onMounted(() => {
   setTimeout(() => {
-    console.log("VehicleForm mounted with props:", prop);
     if (prop.mode === "edit" && prop.vehicleData) {
       // In edit mode, we only want to check for matching people records if there is a pre-filled unit value. If there is no unit value, we can assume that this vehicle record is not linked to any existing people record and skip the check.
       vehicle.seasonPassType = prop.vehicleData.seasonPassType || "";

package/components/VehicleManagement.vue

@@ -38,30 +38,40 @@
       </template>
 
       <!--
-        Edit and Delete were already built and already shipping, but only two
-        clicks deep: click the row -> the read-only "Preview" dialog -> the
-        kebab on the NESTED plate table. Nothing on the row itself said the
-        actions existed. This is the same kebab every other table in this
-        package draws (`AppButton variant="row"` as a `v-menu` activator, see
-        `MemberMain.vue`), and it calls the SAME handlers the nested menu calls,
-        so there is exactly one code path per operation.
-
-        `@click.stop` because the row carries `@row-click`; without it the
-        kebab would open the Preview dialog underneath the menu.
+        The row kebab. Same activator every other table in this package draws
+        (`AppButton variant="row"` as a `v-menu` activator, see
+        `MemberMain.vue`). `@click.stop` because the row also carries
+        `@row-click`; without it the kebab would open the Preview dialog
+        underneath the menu.
+
+        A row can stand for MORE THAN ONE vehicle. The list groups sibling
+        plates by NRIC, so Test Res 3 on staging is one row holding TEST123 and
+        TEST124 - two separate documents. The menu used to resolve a single
+        plate and act on it silently; now every plate on the row is listed
+        under its own number and the operator picks the one they mean.
+
+        The items themselves come from `vehiclePlateActions`, the same function
+        the Preview dialog's menu uses, so the two can no longer disagree - and
+        the kebab's own `v-if` asks that function too, so an empty menu cannot
+        be drawn.
       -->
       <template #item.action="{ item }">
-        <v-menu v-if="rowPlate(item) && hasVehicleActions(rowPlate(item) as TPlateNumber)"
-          location="bottom end">
+        <v-menu v-if="rowHasVehicleActions(item, vehiclePermissions)" location="bottom end">
           <template #activator="{ props: menuProps }">
             <AppButton v-bind="menuProps" variant="row" icon="mdi-dots-vertical" aria-label="Vehicle actions"
               @click.stop />
           </template>
           <v-list density="compact">
-            <v-list-item v-if="canUpdateVehicle && rowPlate(item)?.status === 'active'" title="Edit Vehicle"
-              prepend-icon="mdi-pencil" @click="handleEditVehicleAction(rowPlate(item) as TPlateNumber)" />
-            <v-list-item v-if="canDeleteVehicle && rowPlate(item)?.status === 'active'" title="Delete"
-              prepend-icon="mdi-delete" base-color="error"
-              @click="handleDeleteVehicleAction(rowPlate(item) as TPlateNumber)" />
+            <template v-for="plate in rowPlates(item)" :key="plate._id ?? plate.plateNumber">
+              <template v-if="vehiclePlateActions(plate, vehiclePermissions).length">
+                <v-list-subheader v-if="rowPlates(item).length > 1">
+                  {{ plate.plateNumber }}
+                </v-list-subheader>
+                <v-list-item v-for="action in vehiclePlateActions(plate, vehiclePermissions)" :key="action.key"
+                  :title="action.title" :prepend-icon="action.icon" :base-color="action.color"
+                  @click="runVehicleAction(action.key, plate as TPlateNumber)" />
+              </template>
+            </template>
           </v-list>
         </v-menu>
       </template>
@@ -120,34 +130,17 @@
                           {{ formatVehicleStatus(value).label }}
                         </v-chip>
                       </template>
-                      <template #item.action="{ item: plateNumberItem, value }">
-                        <v-menu v-if="hasVehicleActions(plateNumberItem as TPlateNumber)">
+                      <template #item.action="{ item: plateNumberItem }">
+                        <v-menu v-if="vehiclePlateActions(plateNumberItem, vehiclePermissions).length">
                           <template #activator="{ props: menuProps }">
                             <v-btn icon="mdi-dots-vertical" v-bind="menuProps" flat size="x-small" />
                           </template>
                           <v-list density="compact">
                             <v-list-item
-                              v-if="canUpdateVehicle && (plateNumberItem as TPlateNumber)?.status == 'active'"
-                              title="Edit Vehicle" prepend-icon="mdi-pencil"
-                              @click="handleEditVehicleAction(plateNumberItem as TPlateNumber)" />
-                            <v-list-item
-                              v-if="canApproveVehicle && (plateNumberItem as TPlateNumber)?.status == 'pending'"
-                              title="Approve" prepend-icon="mdi-check-circle" base-color="success"
-                              @click="handleApproveVehicle(plateNumberItem as TPlateNumber)" />
-                            <v-list-item v-if="(plateNumberItem as TPlateNumber)?.status == 'deleted'" title="Restore"
-                              prepend-icon="mdi-restore" base-color="warning"
-                              @click="handleRestoreVehicle(plateNumberItem as TPlateNumber)" />
-                            <v-list-item
-                              v-if="canUpdateVehicle && ((plateNumberItem as TPlateNumber)?.type === 'whitelist' || (plateNumberItem as TPlateNumber)?.type === 'blocklist') && plateNumberItem?.status == 'active'"
-                              :title="(plateNumberItem as TPlateNumber)?.type === 'blocklist' ? 'Unblock' : 'Block'"
-                              prepend-icon="mdi-swap-horizontal"
-                              :base-color="(plateNumberItem as TPlateNumber)?.type === 'blocklist' ? 'primary' : 'error'"
-                              @click="handleUpdateType(plateNumberItem as TPlateNumber)" />
-
-                            <v-list-item
-                              v-if="canDeleteVehicle && (plateNumberItem as TPlateNumber)?.status == 'active'"
-                              title="Delete" prepend-icon="mdi-delete" base-color="error"
-                              @click="handleDeleteVehicleAction(plateNumberItem as TPlateNumber)" />
+                              v-for="action in vehiclePlateActions(plateNumberItem, vehiclePermissions)"
+                              :key="action.key" :title="action.title" :prepend-icon="action.icon"
+                              :base-color="action.color"
+                              @click="runVehicleAction(action.key, plateNumberItem as TPlateNumber)" />
                           </v-list>
                         </v-menu>
                       </template>
@@ -184,19 +177,25 @@
         @delete="submitDelete" @close="closeDeleteDialog" />
     </v-dialog>
     <v-dialog v-model="dialog.approveVehicle" persistent width="540">
-      <DialogReusablePrompt :loading="approvingVehicle"
+      <!--
+        `message` carries the server's refusal. Approve talks to the ANPR
+        cameras, so a failure here is a sentence about a camera that the
+        operator has to read and act on - it was going to a five-second
+        snackbar, along with the device's raw `{"ErrorCode":...}` reply.
+      -->
+      <DialogReusablePrompt :loading="approvingVehicle" :message="actionError"
         :prompt-title="`Are you sure want to approve this vehicle - ${selectedPlateNumberObject?.plateNumber}?`"
-        @proceed="submitApprove" @close="dialog.approveVehicle = false" />
+        @proceed="submitApprove" @close="closeActionDialog('approveVehicle')" />
     </v-dialog>
     <v-dialog v-model="dialog.restoreVehicle" persistent width="540">
-      <DialogReusablePrompt :loading="restoringVehicle"
+      <DialogReusablePrompt :loading="restoringVehicle" :message="actionError"
         :prompt-title="`Are you sure want to restore this vehicle - ${selectedPlateNumberObject?.plateNumber}?`"
-        @proceed="submitRestore" @close="dialog.restoreVehicle = false" />
+        @proceed="submitRestore" @close="closeActionDialog('restoreVehicle')" />
     </v-dialog>
     <v-dialog v-model="dialog.updateVehicleType" persistent width="540">
-      <DialogReusablePrompt :loading="updatingType"
+      <DialogReusablePrompt :loading="updatingType" :message="actionError"
         :prompt-title="`Are you sure want to update the type of this vehicle - ${selectedPlateNumberObject?.plateNumber}?`"
-        @proceed="submitUpdateType" @close="dialog.updateVehicleType = false" />
+        @proceed="submitUpdateType" @close="closeActionDialog('updateVehicleType')" />
     </v-dialog>
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
   </v-row>
@@ -205,6 +204,12 @@
 <script lang="ts" setup>
 import useUtils from '../composables/useUtils';
 import useVehicle from '../composables/useVehicle';
+import {
+  rowHasVehicleActions,
+  rowPlates,
+  vehiclePlateActions,
+  type VehicleActionKey,
+} from '../utils/vehicle-actions';
 
 
 
@@ -275,6 +280,29 @@ const messageSnackbar = ref(false);
 // inside the delete dialog rather than a 5-second toast: it names the camera
 // that failed and the operator needs it in front of them to retry.
 const deleteError = ref("");
+// The same thing for Approve / Restore / Block, which also talk to the cameras
+// and whose refusals were being thrown at a snackbar that times out.
+const actionError = ref("");
+
+function closeActionDialog(key: "approveVehicle" | "restoreVehicle" | "updateVehicleType") {
+  dialog[key] = false;
+  actionError.value = "";
+}
+
+/**
+ * The server's own sentence, or a plain fallback.
+ *
+ * `error.response._data` is undefined on a network failure, so reading it
+ * unguarded threw out of the catch and the operator saw nothing at all.
+ */
+function readServerMessage(error: any, fallback: string) {
+  return (
+    error?.response?._data?.message ||
+    error?.data?.message ||
+    error?.message ||
+    fallback
+  );
+}
 
 function showMessage(msg: string, color: string) {
   message.value = msg;
@@ -425,59 +453,48 @@ function handleDeleteVehicleAction(item: TPlateNumber) {
 
 function handleApproveVehicle(item: TPlateNumber) {
   selectedPlateNumberObject.value = item || null;
+  actionError.value = "";
   dialog.approveVehicle = true;
 }
 function handleRestoreVehicle(item: TPlateNumber) {
   selectedPlateNumberObject.value = item || null;
+  actionError.value = "";
   dialog.restoreVehicle = true;
 }
 
 function handleUpdateType(item: TPlateNumber) {
   selectedPlateNumberObject.value = item || null;
+  actionError.value = "";
   dialog.updateVehicleType = true;
 }
 
 /**
- * The plate document a MAIN-table row actually is.
- *
- * `vehicle.repo.ts` groups sibling plates by non-empty NRIC and keeps the FIRST
- * document's `_id` as the row's `_id` (`vehicleId: { $first: "$_id" }`), then
- * `$addToSet`s the group into `plates`. The row itself carries no
- * `plateNumber`, `type`, `recNo` or `status` - only `plates[]` does - so a row
- * action has to resolve its own plate out of that array before it can name it
- * or delete it.
+ * The three gates the action list is decided by, passed straight through from
+ * the host app's `useLocalPermission()`.
  */
-function rowPlate(item: any): TPlateNumber | null {
-  const plates = (item?.plates ?? []) as Array<TPlateNumber>;
-  return (
-    plates.find((plate) => String(plate?._id) === String(item?._id)) ??
-    plates[0] ??
-    null
-  );
-}
+const vehiclePermissions = computed(() => ({
+  canUpdateVehicle: props.canUpdateVehicle,
+  canDeleteVehicle: props.canDeleteVehicle,
+  canApproveVehicle: props.canApproveVehicle,
+}));
 
 /**
- * True when at least one menu item would render. It has to be the exact union
- * of the five `v-if`s below it, or the kebab appears over an empty menu.
- *
- * `isActive` used to stand alone here, which was the Edit item's test - but
- * Edit is now gated on `canUpdateVehicle`, and Block/Unblock only offers itself
- * for a whitelist/blocklist plate, so a read-only role or a plate of another
- * type would have opened nothing.
+ * One entry point for every menu item, in both menus, so a new action can only
+ * be added in one place and cannot be forgotten in the other.
  */
-function hasVehicleActions(item: TPlateNumber) {
-  const isActive = item?.status === "active";
-  const isPending = item?.status === "pending";
-  const isDeleted = item?.status === "deleted";
-  const canUpdateType = item?.type === "whitelist" || item?.type === "blocklist";
-
-  return (
-    (props.canUpdateVehicle && isActive) ||
-    (props.canApproveVehicle && isPending) ||
-    isDeleted ||
-    (props.canUpdateVehicle && canUpdateType && isActive) ||
-    (props.canDeleteVehicle && isActive)
-  );
+function runVehicleAction(key: VehicleActionKey, plate: TPlateNumber) {
+  switch (key) {
+    case "edit":
+      return handleEditVehicleAction(plate);
+    case "approve":
+      return handleApproveVehicle(plate);
+    case "restore":
+      return handleRestoreVehicle(plate);
+    case "toggle-type":
+      return handleUpdateType(plate);
+    case "delete":
+      return handleDeleteVehicleAction(plate);
+  }
 }
 
 function handleSelectVehicleStatus(value: TVehicleType) {
@@ -549,12 +566,7 @@ async function submitDelete() {
     // request is refused. Say so. This used to assign to `message` WITHOUT
     // raising the snackbar - and `error.response._data` throws on a network
     // error - so a refused delete showed the operator nothing at all.
-    console.error("Error deleting vehicle:", error);
-    deleteError.value =
-      error?.response?._data?.message ||
-      error?.data?.message ||
-      error?.message ||
-      "Failed to delete vehicle.";
+    deleteError.value = readServerMessage(error, "Failed to delete vehicle.");
     // The dialog stays open and the row stays in the table - nothing is removed
     // optimistically, so what is on screen still matches the database.
   } finally {
@@ -575,17 +587,15 @@ async function submitRestore() {
 
   try {
     restoringVehicle.value = true;
+    actionError.value = "";
     // reactivate and restore will use the same endpoint, just with different payload
     const res = await approveVehicle({ site: props.site, org: props.org, id: vehicleId as string }
     );
-    dialog.restoreVehicle = false;
+    closeActionDialog("restoreVehicle");
     showMessage(res.message, "success");
     await getVehiclesRefresh();
   } catch (error: any) {
-    console.error("Error restoring vehicle:", error);
-    const errMessage = error?.response?._data?.message || "Failed to restore vehicle";
-    showMessage(errMessage, "error");
-    // message.value = error.response._data.message;
+    actionError.value = readServerMessage(error, "Failed to restore vehicle.");
   } finally {
     restoringVehicle.value = false;
   }
@@ -626,15 +636,13 @@ async function submitUpdateType() {
 
   try {
     updatingType.value = true;
+    actionError.value = "";
     const res = await updateVehicle(vehicleId as string, payload);
-    dialog.updateVehicleType = false;
+    closeActionDialog("updateVehicleType");
     showMessage(res.message, "success");
     await getVehiclesRefresh();
   } catch (error: any) {
-    console.error("Error updating vehicle type:", error);
-    const errMessage = error?.response?._data?.message || "Failed to update vehicle type";
-    showMessage(errMessage, "error");
-    // message.value = error.response._data.message;
+    actionError.value = readServerMessage(error, "Failed to update vehicle type.");
   } finally {
     updatingType.value = false;
   }
@@ -651,16 +659,15 @@ async function submitApprove() {
 
   try {
     approvingVehicle.value = true;
+    actionError.value = "";
     const res = await approveVehicle({ site: props.site, org: props.org, id: plateNumberId as string }
 
     );
-    dialog.approveVehicle = false;
+    closeActionDialog("approveVehicle");
     showMessage(res.message, "success");
     await getVehiclesRefresh();
   } catch (error: any) {
-    console.error("Error approving vehicle:", error);
-    const errMessage = error?.response?._data?.message || "Failed to approve vehicle";
-    showMessage(errMessage, "error");
+    actionError.value = readServerMessage(error, "Failed to approve vehicle.");
   } finally {
     approvingVehicle.value = false;
   }

package/composables/usePublicVisitorOnboarding.ts

@@ -74,6 +74,19 @@ export default function usePublicVisitorOnboarding() {
     );
   }
 
+  // The Resend button on the links card. `email` is only meaningful for a
+  // registration that carries no address of its own - the server refuses to
+  // redirect one that does, so sending it for an addressed row is harmless but
+  // pointless. A 429 (per-record cooldown, or the per-IP limiter) and a 400
+  // both arrive as a thrown error carrying the server's own message, which the
+  // card shows on the row.
+  function resendSelfServicePass(id: string, email?: string) {
+    return useNuxtApp().$api<{ message: string }>(
+      `/api/visitor-transactions/self-service/resend/${id}`,
+      { method: "POST", body: email ? { email } : {} },
+    );
+  }
+
   return {
     getOnboardingSettings,
     getBlocks,
@@ -83,5 +96,6 @@ export default function usePublicVisitorOnboarding() {
     getOvernightParkingHours,
     getSelfServicePreview,
     getSelfServiceQrCode,
+    resendSelfServicePass,
   };
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.2.2-staging.263",
+  "version": "4.2.2-staging.265",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",

package/utils/self-service-links.ts

@@ -0,0 +1,45 @@
+/**
+ * The pure part of the self-service links card.
+ *
+ * The card hands a lead contractor and each of their members a Copy Link /
+ * View Link / Resend row. Which of those rows still has to ask for an email
+ * address before Resend can do anything is the whole of the interaction, so it
+ * is decided here rather than inline in the template.
+ */
+
+export type TPassRow = {
+  _id: string;
+  name: string;
+  email?: string | null;
+};
+
+/**
+ * The public preview/QR page for one registration. `origin` is empty during
+ * the server render (there is no `window`), which correctly yields a relative
+ * link - the card only ever renders it into an href or the clipboard, both of
+ * which resolve it against the page the visitor is already on.
+ */
+export function passLink(origin: string, id: string): string {
+  return `${origin}/public-view/visitor-onboarding/pass/${id}`;
+}
+
+/**
+ * True when this row has nobody to send to yet, which is the card's cue to
+ * open its inline email field instead of sending. A whitespace-only value is
+ * no address - the API would refuse it.
+ */
+export function needsEmailInput(row: TPassRow): boolean {
+  return !String(row.email ?? "").trim();
+}
+
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
+
+/**
+ * Deliberately the same loose check the API applies
+ * (`isLikelySelfServiceEmail` in @7365admin1/core), so the Send button is not
+ * offered for something the server will only refuse. The server stays the
+ * authority; this just avoids a pointless round trip.
+ */
+export function isLikelyEmail(value?: string | null): boolean {
+  return EMAIL_PATTERN.test(String(value ?? "").trim());
+}

package/utils/vehicle-actions.ts

@@ -0,0 +1,141 @@
+/**
+ * Which actions a vehicle plate offers, in one place.
+ *
+ * The reason this exists rather than a list of `v-if`s: the row menu and the
+ * Preview dialog's menu each had their OWN copy of the conditions, and they
+ * drifted. On staging, 1 Sep 2026:
+ *
+ *  - a PENDING plate's row kebab opened an EMPTY menu - Approve was only ever
+ *    written into the Preview copy;
+ *  - an INACTIVE (blocked) plate had no kebab at all and no action in Preview
+ *    either, because every condition in both copies tested for
+ *    active / pending / deleted, so there was no way to restore it.
+ *
+ * With the decision in one function, "the kebab shows" and "the menu has
+ * something in it" are the same question, and an empty menu cannot be drawn.
+ */
+
+export type VehicleActionKey =
+  | "edit"
+  | "approve"
+  | "restore"
+  | "toggle-type"
+  | "delete";
+
+export type VehicleActionPermissions = {
+  canUpdateVehicle?: boolean;
+  canDeleteVehicle?: boolean;
+  canApproveVehicle?: boolean;
+};
+
+export type VehicleAction = {
+  key: VehicleActionKey;
+  title: string;
+  icon: string;
+  /** Vuetify `base-color`; undefined means the list's default. */
+  color?: string;
+};
+
+/** The shape a plate is read as. Only the three fields the decision uses. */
+export type VehicleActionPlate = {
+  status?: string | null;
+  type?: string | null;
+  plateNumber?: string | null;
+};
+
+/**
+ * `inactive` is the status a blocked vehicle carries, and `deleted` is a
+ * soft-deleted one. Both are "not currently working, and someone should be
+ * able to put it back".
+ */
+const RESTORABLE = new Set(["inactive", "deleted", "rejected"]);
+
+export function vehiclePlateActions(
+  plate: VehicleActionPlate | null | undefined,
+  permissions: VehicleActionPermissions = {},
+): VehicleAction[] {
+  if (!plate) return [];
+
+  const status = String(plate.status ?? "").toLowerCase();
+  const type = String(plate.type ?? "").toLowerCase();
+
+  const isActive = status === "active";
+  const isPending = status === "pending";
+  const isRestorable = RESTORABLE.has(status);
+  const isTogglableType = type === "whitelist" || type === "blocklist";
+
+  const actions: VehicleAction[] = [];
+
+  if (permissions.canUpdateVehicle && isActive) {
+    actions.push({ key: "edit", title: "Edit Vehicle", icon: "mdi-pencil" });
+  }
+
+  if (permissions.canApproveVehicle && isPending) {
+    actions.push({
+      key: "approve",
+      title: "Approve",
+      icon: "mdi-check-circle",
+      color: "success",
+    });
+  }
+
+  // Restore is deliberately NOT gated on `canUpdateVehicle`: it was ungated
+  // before this change and narrowing a gate is a separate, role-data decision.
+  // What changes is that a blocked vehicle now offers it at all.
+  if (isRestorable) {
+    actions.push({
+      key: "restore",
+      title: status === "inactive" ? "Unblock" : "Restore",
+      icon: "mdi-restore",
+      color: "warning",
+    });
+  }
+
+  if (permissions.canUpdateVehicle && isTogglableType && isActive) {
+    actions.push({
+      key: "toggle-type",
+      title: type === "blocklist" ? "Unblock" : "Block",
+      icon: "mdi-swap-horizontal",
+      color: type === "blocklist" ? "primary" : "error",
+    });
+  }
+
+  if (permissions.canDeleteVehicle && isActive) {
+    actions.push({
+      key: "delete",
+      title: "Delete",
+      icon: "mdi-delete",
+      color: "error",
+    });
+  }
+
+  return actions;
+}
+
+/**
+ * Every plate a MAIN-table row stands for.
+ *
+ * `vehicle.repo.ts` groups sibling plates by non-empty NRIC and keeps the FIRST
+ * document's `_id` as the row's `_id`, then collects the group into `plates`.
+ * Test Res 3 on staging is one row holding TEST123 (whitelist) and TEST124
+ * (blocklist) - two separate vehicle documents. The row menu used to resolve a
+ * single plate and silently act on TEST123, with no way to reach TEST124.
+ */
+export function rowPlates(row: any): any[] {
+  const plates = Array.isArray(row?.plates) ? row.plates : [];
+  if (plates.length) return plates;
+
+  // A row that carries its own plate fields and no group (the shape the older
+  // list endpoints return) is a single plate.
+  return row?.plateNumber ? [row] : [];
+}
+
+/** True when at least one plate on the row offers at least one action. */
+export function rowHasVehicleActions(
+  row: any,
+  permissions: VehicleActionPermissions = {},
+): boolean {
+  return rowPlates(row).some(
+    (plate) => vehiclePlateActions(plate, permissions).length > 0,
+  );
+}