@7365admin1/layer-common 4.147.2 → 4.148.1

package/components/TableMain.vue

@@ -131,7 +131,9 @@
         />
 
         <!-- Toolbar -->
-        <CardToolbar :count="pageRange">
+        <CardToolbar
+          :count="$slots['pagination-prepend'] ? '' : pageRange"
+        >
           <!--
             The design draws a screen's tabs ON the toolbar row, not on a
             stacked strip above the table. `CardToolbar` has always had the
@@ -174,6 +176,15 @@
           </template>
 
           <template #right>
+            <!--
+              Before the range and pager, e.g. the visitor list's default-camera
+              button. With it filled, the range is drawn here (not by CardToolbar)
+              so the button can sit in front of it.
+            -->
+            <template v-if="$slots['pagination-prepend']">
+              <slot name="pagination-prepend" />
+              <span v-if="pageRange" class="app-toolbar__count">{{ pageRange }}</span>
+            </template>
             <local-pagination
               v-model="internalPage"
               :length="pages"

package/components/TaskCalendarMain.vue

@@ -0,0 +1,200 @@
+<!--
+  TASK CALENDAR for the five trade apps (owner 24 Oct 2026): one page for every
+  scheduled job at the site, in two tabs.
+
+    "From managing agent" - tasks the managing agent gave this company
+                            (TaskCalendarReadOnly, view only).
+    "My extra checks"     - the company's own extra checks
+                            (ScheduleTaskMain, add / edit / pause / delete).
+
+  Each tab shows only when the viewer's role already allows it (the same keys
+  the two separate menu items used), so nobody gains or loses access. The tab
+  is kept in the address (?tab=agent | extra) so a link opens the right one.
+-->
+<template>
+  <v-row no-gutters>
+    <v-col cols="12">
+      <PageHeader title="Task Calendar" />
+
+      <v-expansion-panels
+        v-model="helpPanel"
+        class="tc-help mb-4"
+        variant="accordion"
+        flat
+      >
+        <v-expansion-panel value="how">
+          <v-expansion-panel-title class="tc-help__title">
+            <v-icon size="20" class="mr-2">mdi-help-circle-outline</v-icon>
+            How the Task Calendar works
+          </v-expansion-panel-title>
+          <v-expansion-panel-text class="tc-help__body">
+            <ul class="tc-help__list">
+              <li v-if="showAgent">
+                <strong>From managing agent</strong> - jobs the building's
+                managing agent gave your company, for example a monthly pump
+                service. You can only look at them here. The managing agent
+                marks them done.
+              </li>
+              <li v-if="showExtra">
+                <strong>My extra checks</strong> - checks your company adds on
+                top of the normal daily rounds, for example "Lunch toilet
+                check, Lobby Toilets, 2:00 pm every weekday". The managing
+                agent can see them too, but cannot change them.
+              </li>
+              <li v-if="showExtra">
+                At the set time, the extra check appears in staff's
+                <strong>Daily Checklist</strong> on their phone and they get a
+                notification. They tick each unit there.
+              </li>
+            </ul>
+            <div class="tc-help__h">What the words mean</div>
+            <dl class="tc-help__legend">
+              <template v-for="h in words" :key="h.word">
+                <dt><StatusChip :status="h.word" :label="h.word" :tone="h.tone" /></dt>
+                <dd>{{ h.meaning }}</dd>
+              </template>
+            </dl>
+          </v-expansion-panel-text>
+        </v-expansion-panel>
+      </v-expansion-panels>
+
+      <div v-if="tabs.length > 1" class="app-tabs mb-4" role="tablist">
+        <button
+          v-for="t in tabs"
+          :key="t.key"
+          type="button"
+          role="tab"
+          class="app-tab"
+          :class="{ 'app-tab--active': tab === t.key }"
+          :aria-selected="tab === t.key"
+          :data-test="`task-calendar-tab-${t.key}`"
+          @click="chooseTab(t.key)"
+        >
+          {{ t.name }}
+        </button>
+      </div>
+
+      <TaskCalendarReadOnly
+        v-if="tab === 'agent'"
+        :site-id="siteId"
+        embedded
+      />
+      <ScheduleTaskMain
+        v-else-if="tab === 'extra'"
+        :org-id="orgId"
+        :site="siteId"
+        :service-type="serviceType"
+        :can-view-schedule-tasks="canViewScheduleTasks"
+        :can-create-schedule-task="canCreateScheduleTask"
+        :can-update-schedule-task="canUpdateScheduleTask"
+        :can-delete-schedule-task="canDeleteScheduleTask"
+        :can-view-schedule-task-details="canViewScheduleTaskDetails"
+        embedded
+      />
+      <v-alert v-else type="info" variant="tonal" class="ma-4">
+        Your role does not include the Task Calendar.
+      </v-alert>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+import {
+  pickTaskCalendarTab,
+  taskCalendarWords,
+  type TTaskCalendarTab,
+} from "../utils/task-calendar-tabs";
+
+const props = defineProps({
+  orgId: { type: String, required: true },
+  siteId: { type: String, required: true },
+  serviceType: { type: String, default: "" },
+  /** Opened from an old Extra Checks link: start on "My extra checks". */
+  initialTab: { type: String, default: "" },
+  canViewTaskCalendar: { type: Boolean, default: false },
+  canViewScheduleTasks: { type: Boolean, default: false },
+  canCreateScheduleTask: { type: Boolean, default: false },
+  canUpdateScheduleTask: { type: Boolean, default: false },
+  canDeleteScheduleTask: { type: Boolean, default: false },
+  canViewScheduleTaskDetails: { type: Boolean, default: false },
+});
+
+const route = useRoute();
+const router = useRouter();
+
+const showAgent = computed(() => props.canViewTaskCalendar);
+const showExtra = computed(() => props.canViewScheduleTasks);
+
+const words = computed(() =>
+  taskCalendarWords({ agent: showAgent.value, extra: showExtra.value }),
+);
+
+const tabs = computed(() => [
+  ...(showAgent.value ? [{ key: "agent" as const, name: "From managing agent" }] : []),
+  ...(showExtra.value ? [{ key: "extra" as const, name: "My extra checks" }] : []),
+]);
+
+const tab = computed<TTaskCalendarTab | "">(() =>
+  pickTaskCalendarTab(route.query.tab, props.initialTab, {
+    agent: showAgent.value,
+    extra: showExtra.value,
+  }),
+);
+
+function chooseTab(key: TTaskCalendarTab) {
+  if (key === tab.value) return;
+  router.replace({ query: { ...route.query, tab: key } });
+}
+
+// Open until the viewer closes it; remembered on this browser only.
+const HELP_STORE = "task-calendar-help";
+const helpPanel = ref<string | undefined>("how");
+onMounted(() => {
+  try {
+    if (localStorage.getItem(HELP_STORE) === "closed") helpPanel.value = undefined;
+  } catch {
+    // storage blocked: stay open
+  }
+});
+watch(helpPanel, (v) => {
+  try {
+    localStorage.setItem(HELP_STORE, v ? "open" : "closed");
+  } catch {
+    // storage blocked: nothing to remember
+  }
+});
+</script>
+
+<style scoped>
+.tc-help {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+}
+.tc-help__title {
+  font-weight: 700;
+}
+.tc-help__body {
+  font-size: var(--fs-cell);
+  color: var(--text);
+}
+.tc-help__list {
+  margin: 0 0 12px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.tc-help__h {
+  font-weight: 700;
+  margin-bottom: 6px;
+}
+.tc-help__legend {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 6px 12px;
+  align-items: center;
+  margin: 0;
+}
+.tc-help__legend dd {
+  margin: 0;
+}
+</style>

package/components/TaskCalendarReadOnly.vue

@@ -1,6 +1,6 @@
 <template>
     <v-row no-gutters>
-        <v-col cols="12">
+        <v-col v-if="!embedded" cols="12">
             <PageHeader title="Task Calendar"
                 subtitle="Tasks the managing agent assigned to your company at this site. View only - the managing agent marks them done." />
         </v-col>
@@ -16,8 +16,11 @@
                 </button>
             </template>
 
-            <template v-if="error" #no-data>
-                <DashboardEmptyState error />
+            <template #no-data>
+                <DashboardEmptyState v-if="error" error />
+                <div v-else class="tc-ro-empty" data-test="task-calendar-agent-empty">
+                    {{ EMPTY_TEXT[status] || EMPTY_TEXT.planned }}
+                </div>
             </template>
 
             <template v-slot:item.dateTime="{ item }">{{ dueDate(item.dateTime) }}</template>
@@ -54,9 +57,17 @@ import { readListPage } from '../utils/list-page';
 
 const props = defineProps({
     siteId: { type: String, required: true },
+    /** Inside the Task Calendar page (TaskCalendarMain), which has the title and help. */
+    embedded: { type: Boolean, default: false },
 });
 
 const LIMIT = 20;
+// Per tab, in plain words (owner 24 Oct): never a bare "No data available".
+const EMPTY_TEXT: Record<string, string> = {
+    planned: "No jobs from the managing agent yet. When they give your company a job at this site, it shows here.",
+    overdue: "Nothing overdue. Jobs from the managing agent that pass their due date show here.",
+    completed: "No finished jobs yet. Jobs the managing agent marks done show here.",
+};
 const TABS = [
     { name: "Open", status: "planned" },
     { name: "Overdue", status: "overdue" },
@@ -113,3 +124,11 @@ function taskState(task: Record<string, any>) {
     return { label: "Upcoming", color: "primary" };
 }
 </script>
+
+<style scoped>
+.tc-ro-empty {
+    padding: 24px 16px;
+    font-size: var(--fs-cell);
+    color: var(--text2);
+}
+</style>

package/components/VehicleAddSelection.vue

@@ -29,16 +29,23 @@ type TVehicleAddChoice = TVehicleType | "seasonpass" | "whitelist-bulk";
 const prop = defineProps({
   // Security catalogue v2: false hides the Blocklist choice. Default = today.
   canManageBlocklist: { type: Boolean, default: true },
+  // Add Vehicle: false hides Whitelist, Whitelist (Bulk) and Season Pass, so a
+  // role with only Manage Blocklist is offered the Blocklist form alone.
+  canAddWhitelist: { type: Boolean, default: true },
 });
 
 const emit = defineEmits(['cancel', 'select']);
 
 const selection = computed<{label: string, value: TVehicleAddChoice}[]>(() => {
   return [
-    { label: "Whitelist", value: "whitelist" },
-    // Many whitelist vehicles at once, typed or pasted into a sheet.
-    { label: "Whitelist (Bulk)", value: "whitelist-bulk" },
-    { label: "Season Pass", value: "seasonpass" },
+    ...(prop.canAddWhitelist
+      ? [
+          { label: "Whitelist", value: "whitelist" as TVehicleAddChoice },
+          // Many whitelist vehicles at once, typed or pasted into a sheet.
+          { label: "Whitelist (Bulk)", value: "whitelist-bulk" as TVehicleAddChoice },
+          { label: "Season Pass", value: "seasonpass" as TVehicleAddChoice },
+        ]
+      : []),
     ...(prop.canManageBlocklist
       ? [{ label: "Blocklist", value: "blocklist" as TVehicleAddChoice }]
       : []),

package/components/VehicleManagement.vue

@@ -17,7 +17,7 @@
           <AppButton v-if="qrStickersOn" icon="mdi-qrcode" variant="ghost" @click="openStickerDialog()">
             Print QR stickers
           </AppButton>
-          <AppButton v-if="canCreateVehicle" icon="mdi-plus" @click="handleAddVehicleClick">
+          <AppButton v-if="canCreateVehicle || canAddBlocklist" icon="mdi-plus" @click="handleAddVehicleClick">
             Add Vehicle
           </AppButton>
         </template>
@@ -103,26 +103,26 @@
         be drawn.
       -->
       <template #item.action="{ item }">
-        <v-menu v-if="rowHasVehicleActions(item, vehiclePermissions) || qrStickersOn" location="bottom end">
+        <v-menu v-if="rowHasVehicleActions(item, vehiclePermissions) || qrStickersOn || rowPlates(item).some(qrActionsOn)" 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">
             <template v-for="plate in rowPlates(item)" :key="plate._id ?? plate.plateNumber">
-              <template v-if="vehiclePlateActions(plate, vehiclePermissions).length || qrStickersOn">
+              <template v-if="vehiclePlateActions(plate, vehiclePermissions).length || qrStickersOn || qrActionsOn(plate)">
                 <v-list-subheader v-if="rowPlates(item).length > 1">
                   {{ plate.plateNumber }}
                 </v-list-subheader>
                 <v-list-item v-if="qrStickersOn && plate.hasQrSticker" title="Print sticker again" prepend-icon="mdi-printer"
                   data-test="vehicle-qr-print-again" @click="openStickerDialog([String(plate._id)])" />
-                <v-list-item v-if="qrStickersOn" title="Re-issue sticker (lost or stolen)" prepend-icon="mdi-qrcode-edit"
+                <v-list-item v-if="qrActionsOn(plate)" title="Re-issue sticker (lost or stolen)" prepend-icon="mdi-qrcode-edit"
                   @click="askReissue(plate as TPlateNumber)" />
-                <v-list-item v-if="qrStickersOn" title="Undo re-issue" prepend-icon="mdi-undo"
+                <v-list-item v-if="qrActionsOn(plate)" title="Undo re-issue" prepend-icon="mdi-undo"
                   data-test="vehicle-qr-undo" @click="askUndo(plate as TPlateNumber)" />
-                <v-list-item v-if="qrStickersOn" title="Link QR sticker" prepend-icon="mdi-link-variant"
+                <v-list-item v-if="qrActionsOn(plate)" title="Link QR sticker" prepend-icon="mdi-link-variant"
                   @click="askLink(plate as TPlateNumber)" />
-                <v-list-item v-if="qrStickersOn" title="Remove QR sticker" prepend-icon="mdi-link-variant-off"
+                <v-list-item v-if="qrActionsOn(plate)" title="Remove QR sticker" prepend-icon="mdi-link-variant-off"
                   @click="askUnlink(plate as TPlateNumber)" />
                 <v-list-item v-for="action in vehiclePlateActions(plate, vehiclePermissions)" :key="action.key"
                   :title="action.title" :prepend-icon="action.icon" :base-color="action.color"
@@ -137,7 +137,7 @@
     <!-- <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" /> -->
 
     <v-dialog v-model="dialog.showSelection" width="450" persistent>
-      <VehicleAddSelection :can-manage-blocklist="canManageBlocklist" @cancel="dialog.showSelection = false" @select="handleSelectVehicleStatus" />
+      <VehicleAddSelection :can-manage-blocklist="canManageBlocklist" :can-add-whitelist="canCreateVehicle" @cancel="dialog.showSelection = false" @select="handleSelectVehicleStatus" />
     </v-dialog>
 
     <!-- Many whitelist vehicles at once. Wider than the one-vehicle form: it
@@ -232,7 +232,7 @@
                           <AnprCameraBadge :cameras="(plateNumberItem as any).anprCameras ?? []" :plate-number="value"
                             :plate-id="(plateNumberItem as any)._id ?? ''" :status="(plateNumberItem as any).status ?? ''"
                             :type="(plateNumberItem as any).type ?? ''" :end="(plateNumberItem as any).end ?? null"
-                            :active-counts="activeCameraCounts"
+                            :active-counts="activeCameraCounts" :can-sync="syncAllowed(plateNumberItem)"
                             @synced="handleSynced" />
                         </span>
                       </template>
@@ -244,20 +244,20 @@
                           v-tooltip:top="'History'" @click="openHistory(plateNumberItem as TPlateNumber)" />
                       </template>
                       <template #item.action="{ item: plateNumberItem }">
-                        <v-menu v-if="vehiclePlateActions(plateNumberItem, vehiclePermissions).length || qrStickersOn">
+                        <v-menu v-if="vehiclePlateActions(plateNumberItem, vehiclePermissions).length || qrStickersOn || qrActionsOn(plateNumberItem)">
                           <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="qrStickersOn && (plateNumberItem as any).hasQrSticker" title="Print sticker again" prepend-icon="mdi-printer"
                               data-test="vehicle-qr-print-again" @click="openStickerDialog([String((plateNumberItem as any)._id)])" />
-                            <v-list-item v-if="qrStickersOn" title="Re-issue sticker (lost or stolen)" prepend-icon="mdi-qrcode-edit"
+                            <v-list-item v-if="qrActionsOn(plateNumberItem)" title="Re-issue sticker (lost or stolen)" prepend-icon="mdi-qrcode-edit"
                               @click="askReissue((plateNumberItem as any) as TPlateNumber)" />
-                            <v-list-item v-if="qrStickersOn" title="Undo re-issue" prepend-icon="mdi-undo"
+                            <v-list-item v-if="qrActionsOn(plateNumberItem)" title="Undo re-issue" prepend-icon="mdi-undo"
                               data-test="vehicle-qr-undo" @click="askUndo((plateNumberItem as any) as TPlateNumber)" />
-                            <v-list-item v-if="qrStickersOn" title="Link QR sticker" prepend-icon="mdi-link-variant"
+                            <v-list-item v-if="qrActionsOn(plateNumberItem)" title="Link QR sticker" prepend-icon="mdi-link-variant"
                               @click="askLink(plateNumberItem as TPlateNumber)" />
-                            <v-list-item v-if="qrStickersOn" title="Remove QR sticker" prepend-icon="mdi-link-variant-off"
+                            <v-list-item v-if="qrActionsOn(plateNumberItem)" title="Remove QR sticker" prepend-icon="mdi-link-variant-off"
                               @click="askUnlink(plateNumberItem as TPlateNumber)" />
                             <v-list-item
                               v-for="action in vehiclePlateActions(plateNumberItem, vehiclePermissions)"
@@ -296,7 +296,7 @@
         when the ANPR revoke could not be confirmed - the dialog stays open on
         that path so the operator can read it and retry.
       -->
-      <DialogDeleteConfirmation :loading="deletingVehicle" :message="deleteError" :no-permission="revoked.delete"
+      <DialogDeleteConfirmation :loading="deletingVehicle" :message="deleteError" :no-permission="revoked[rightFor('delete')]"
         :prompt-title="`Remove vehicle number ${selectedPlateNumberObject?.plateNumber} from this record? This revokes its ANPR access - it will no longer open the barrier. The resident and any other vehicle numbers on this record are not affected.`"
         @delete="submitDelete" @close="closeDeleteDialog" />
     </v-dialog>
@@ -314,19 +314,19 @@
     <!-- Like Delete, Restore says what it does at the barrier: a whitelist
          plate goes back on the allowed list and opens it again. -->
     <v-dialog v-model="dialog.restoreVehicle" persistent width="540">
-      <DialogReusablePrompt :loading="restoringVehicle" :message="actionError" message-error :no-permission="revoked.approve"
+      <DialogReusablePrompt :loading="restoringVehicle" :message="actionError" message-error :no-permission="revoked[restoreRight()]"
         :prompt-title="restorePrompt"
         @proceed="submitRestore" @close="closeActionDialog('restoreVehicle')" />
     </v-dialog>
     <!-- Block / Unblock say what happens on the cameras, because that is the
          part the operator cannot see from here. -->
     <v-dialog v-model="dialog.blockVehicle" persistent width="540">
-      <DialogReusablePrompt :loading="blockingVehicle" :message="actionError" message-error :no-permission="revoked.update"
+      <DialogReusablePrompt :loading="blockingVehicle" :message="actionError" message-error :no-permission="revoked[rightFor('update', true)]"
         :prompt-title="`Block vehicle ${selectedPlateNumberObject?.plateNumber}? It is added to every ANPR camera's blocklist and taken off the allowed list. Its status becomes Blocked and its category Block Listed.`"
         @proceed="submitBlock" @close="closeActionDialog('blockVehicle')" />
     </v-dialog>
     <v-dialog v-model="dialog.unblockVehicle" persistent width="540">
-      <DialogReusablePrompt :loading="unblockingVehicle" :message="actionError" message-error :no-permission="revoked.update"
+      <DialogReusablePrompt :loading="unblockingVehicle" :message="actionError" message-error :no-permission="revoked[rightFor('update', true)]"
         :prompt-title="`Unblock vehicle ${selectedPlateNumberObject?.plateNumber}? It is taken off every ANPR camera's blocklist. It is NOT whitelisted - the record stays with status Unblocked.`"
         @proceed="submitUnblock" @close="closeActionDialog('unblockVehicle')" />
     </v-dialog>
@@ -590,6 +590,14 @@ const vehicleTabs = computed<{ name: string; value: TVehicleTab }[]>(() => [
 ])
 const activeTab = ref<TVehicleTab>("residents");
 
+/**
+ * Adding to the Block Listed tab follows Manage Blocklist alone (owner,
+ * 2026-10-23), not Add Vehicle: a role with only that box still gets the Add
+ * Vehicle button, offering the Blocklist form only. Apps that do not pass the
+ * flag (undefined) keep today's rule - the button follows Add Vehicle.
+ */
+const canAddBlocklist = computed(() => props.canManageBlocklist === true);
+
 
 
 const { formatCamelCaseToWords, formatDate, debounce, maskNRIC } = useUtils();
@@ -605,6 +613,28 @@ const qrStickerFilterItems = [
   { title: "Without sticker", value: "without" },
 ];
 const qrStickersOn = computed(() => qrEnabled.value && props.canUpdateVehicle);
+
+/**
+ * Re-issue / Undo / Link / Remove on one plate change that vehicle, so on a
+ * Block Listed plate they follow Manage Blocklist (owner, 2026-10-23) when the
+ * host passes it; any other plate follows Update Vehicle. Printing stays with
+ * `qrStickersOn`.
+ */
+/** Sync on a Block Listed plate follows Manage Blocklist when the host passes it. */
+function syncAllowed(plate: any): boolean {
+  if (props.canManageBlocklist !== undefined && plate?.type === "blocklist") {
+    return !!vehiclePermissions.value.canManageBlocklist;
+  }
+  return true;
+}
+
+function qrActionsOn(plate: any): boolean {
+  if (!qrEnabled.value) return false;
+  if (props.canManageBlocklist !== undefined && plate?.type === "blocklist") {
+    return !!vehiclePermissions.value.canManageBlocklist;
+  }
+  return props.canUpdateVehicle;
+}
 const qrVehicleIds = ref<string[]>([]);
 const qrReissuePlate = ref<TPlateNumber | null>(null);
 const qrReissuing = ref(false);
@@ -635,7 +665,8 @@ const qrCodeToLink = computed(() => String(qrLinkCode.value || qrSearch.value ||
 
 // Saved blank codes still free to link + the site's printed / linked / available count.
 async function loadQrAvailable(search = "") {
-  if (!qrStickersOn.value) return;
+  // The Link dialog lists the blanks for whoever may link this plate.
+  if (!qrStickersOn.value && !(dialog.qrLink && qrActionsOn(qrPlate.value))) return;
   try {
     const res = await getAvailableBlankVehicleQr(props.site, { search, limit: 50 });
     qrSummary.value = res?.summary ?? null;
@@ -1139,7 +1170,10 @@ const vehiclePermissions = computed(() => ({
   canUpdateVehicle: props.canUpdateVehicle && !revoked.update,
   canDeleteVehicle: props.canDeleteVehicle && !revoked.delete,
   canApproveVehicle: props.canApproveVehicle && !revoked.approve,
-  canManageBlocklist: props.canManageBlocklist,
+  canManageBlocklist:
+    props.canManageBlocklist === undefined
+      ? undefined
+      : props.canManageBlocklist && !revoked.blocklist,
 }));
 
 /**
@@ -1153,8 +1187,26 @@ const vehiclePermissions = computed(() => ({
  * the local override is dropped and the host's answer stands again - so a
  * right given back is not kept hidden.
  */
-const revoked = reactive({ update: false, delete: false, approve: false });
+const revoked = reactive({ update: false, delete: false, approve: false, blocklist: false });
 watch(() => props.canUpdateVehicle, () => { revoked.update = false; });
+watch(() => props.canManageBlocklist, () => { revoked.blocklist = false; });
+
+/**
+ * Which right an action on the selected plate stands on. With Manage Blocklist
+ * passed by the host, Block / Unblock - and Edit / Delete on a Block Listed
+ * plate - are that right, so a refusal there takes only those off the menus.
+ */
+/** Restore on a Block Listed plate is a blocklist write; any other stays Approve. */
+function restoreRight(): keyof typeof revoked {
+  if (props.canManageBlocklist === undefined) return "approve";
+  return selectedPlateNumberObject.value?.type === "blocklist" ? "blocklist" : "approve";
+}
+
+function rightFor(base: "update" | "delete", blockAction = false): keyof typeof revoked {
+  if (props.canManageBlocklist === undefined) return base;
+  if (blockAction || selectedPlateNumberObject.value?.type === "blocklist") return "blocklist";
+  return base;
+}
 watch(() => props.canDeleteVehicle, () => { revoked.delete = false; });
 watch(() => props.canApproveVehicle, () => { revoked.approve = false; });
 
@@ -1167,6 +1219,7 @@ const NO_PERMISSION: Record<keyof typeof revoked, string> = {
   update: "You do not have permission to edit vehicles.",
   delete: "You do not have permission to delete vehicles.",
   approve: "You do not have permission to approve vehicles.",
+  blocklist: "You do not have permission to manage the block list.",
 };
 
 /**
@@ -1176,7 +1229,7 @@ const NO_PERMISSION: Record<keyof typeof revoked, string> = {
  */
 /** The add/edit form was refused: an edit refusal takes Edit/Block/Unblock off. */
 function handleFormRefused(kind: "create" | "update") {
-  if (kind === "update") revoked.update = true;
+  if (kind === "update") revoked[rightFor("update")] = true;
 }
 
 function refusedAlready(right: keyof typeof revoked, target: typeof actionError) {
@@ -1266,7 +1319,7 @@ const formatPlateNumbers = (value: any) => {
 };
 
 async function submitDelete() {
-  if (refusedAlready("delete", deleteError)) return;
+  if (refusedAlready(rightFor("delete"), deleteError)) return;
 
   const plateNumberId = selectedPlateNumberObject.value?._id;
   const type = selectedPlateNumberObject.value?.type as TVehicleType;
@@ -1292,7 +1345,7 @@ async function submitDelete() {
     // error - so a refused delete showed the operator nothing at all.
     deleteError.value = errorConverter(error);
     // Refused for want of the right: take Delete off both menus now.
-    revokeOnRefusal(error, "delete");
+    revokeOnRefusal(error, rightFor("delete"));
     // 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 {
@@ -1328,7 +1381,7 @@ const restorePrompt = computed(() => {
 });
 
 async function submitRestore() {
-  if (refusedAlready("approve", actionError)) return;
+  if (refusedAlready(restoreRight(), actionError)) return;
 
   const vehicleId = selectedPlateNumberObject.value?._id;
 
@@ -1349,7 +1402,7 @@ async function submitRestore() {
   } catch (error: any) {
     actionError.value = errorConverter(error);
     // Restore is the approve endpoint: a refusal is the Approve right gone.
-    revokeOnRefusal(error, "approve");
+    revokeOnRefusal(error, restoreRight());
   } finally {
     restoringVehicle.value = false;
   }
@@ -1357,7 +1410,7 @@ async function submitRestore() {
 
 
 async function submitBlock() {
-  if (refusedAlready("update", actionError)) return;
+  if (refusedAlready(rightFor("update", true), actionError)) return;
   const vehicleId = selectedPlateNumberObject.value?._id;
   if (!vehicleId) {
     showMessage("Invalid vehicle selected for blocking.", "error");
@@ -1373,7 +1426,7 @@ async function submitBlock() {
     await getVehiclesRefresh();
   } catch (error: any) {
     actionError.value = errorConverter(error);
-    revokeOnRefusal(error, "update");
+    revokeOnRefusal(error, rightFor("update", true));
   } finally {
     blockingVehicle.value = false;
   }
@@ -1381,7 +1434,7 @@ async function submitBlock() {
 
 
 async function submitUnblock() {
-  if (refusedAlready("update", actionError)) return;
+  if (refusedAlready(rightFor("update", true), actionError)) return;
   const vehicleId = selectedPlateNumberObject.value?._id;
   if (!vehicleId) {
     showMessage("Invalid vehicle selected for unblocking.", "error");
@@ -1397,7 +1450,7 @@ async function submitUnblock() {
     await getVehiclesRefresh();
   } catch (error: any) {
     actionError.value = errorConverter(error);
-    revokeOnRefusal(error, "update");
+    revokeOnRefusal(error, rightFor("update", true));
   } finally {
     unblockingVehicle.value = false;
   }

package/components/VisitorDataFromScannedQRCodeForm.vue

@@ -202,7 +202,7 @@
       <AppButton
         v-if="!visitorInfo.checkIn && !visitorInfo.checkOut"
         :disabled="processing"
-        @click="emit('check-in-out', 'checkIn', visitorInfo)"
+        @click="checkIn"
       >
         Check In
       </AppButton>
@@ -240,6 +240,11 @@ const { standardFormatDateTime } = useUtils();
 
 const visitorInfo = ref<Partial<TVisitor>>({});
 
+// The list adds the user's default ANPR gate when it checks the guest in.
+function checkIn() {
+  emit("check-in-out", "checkIn", visitorInfo.value);
+}
+
 watch(
   () => prop.visitorData,
   (visitorData) => {