@7365admin1/layer-common 4.97.1-staging.598 → 4.97.1-staging.600

package/components/AnprCameraBadge.vue

@@ -18,7 +18,7 @@
     class="anpr-badge anpr-badge--sync"
     :disabled="syncing"
     :aria-label="`Sync ${plateNumber} to all active ANPR cameras`"
-    v-tooltip:top="`On ${count} of ${expected} active camera${expected === 1 ? '' : 's'} - sync to all`"
+    v-tooltip:top="`On ${onItsList} of ${expected} active camera${expected === 1 ? '' : 's'} - sync to all`"
     @click.stop="sync"
   >
     <v-progress-circular v-if="syncing" indeterminate size="11" width="2" />
@@ -77,6 +77,8 @@ const props = defineProps({
   type: { type: String, default: "" },
   /** The pass's expiry: once passed, "Allowed" reads "Expired" in red. */
   end: { type: [String, Date] as PropType<string | Date | null>, default: null },
+  /** False hides Sync (the host's right to write this plate to the cameras). */
+  canSync: { type: Boolean, default: true },
   /** Active cameras per list at the site; null hides Sync. */
   activeCounts: {
     type: Object as PropType<{ allowed: number; blocked: number } | null>,
@@ -120,10 +122,11 @@ function listTone(list: string) {
 const showSync = computed(
   () =>
     !!props.plateId &&
+    props.canSync &&
     !expired.value &&
     LIVE.includes(props.status) &&
     expected.value > 0 &&
-    count.value < expected.value
+    onItsList.value < expected.value
 );
 
 async function sync() {
@@ -166,6 +169,16 @@ const uniqueCameras = computed(() => {
 });
 
 const count = computed<number>(() => uniqueCameras.value.length);
+
+/**
+ * Cameras holding the plate on ITS list - what Sync compares with. A resident
+ * blocked while its camera was off is still on that camera's allowed list,
+ * which is not a block (owner, 2026-10-23). An entry with no list still counts.
+ */
+const onItsList = computed<number>(() => {
+  const wanted = props.type === "blocklist" ? "blocked" : "allowed";
+  return uniqueCameras.value.filter((cam) => !cam.list || cam.list === wanted).length;
+});
 const isBlocked = computed(() => props.cameras?.some((c) => c.list === "blocked"));
 </script>
 

package/components/CameraForm.vue

@@ -139,15 +139,22 @@
             />
           </v-col>
 
-          <!-- <v-col v-if="isANPR" cols="12">
-            <InputLabel class="text-capitalize" title="Guard House" />
+          <!-- The gate this ANPR camera watches (owner, 2026-10-23), in place
+               of Guard House: 1 to 20, one camera per gate at a site - a gate
+               another camera uses cannot be picked. Messages name the camera
+               by it ("Entry Gate 1"). -->
+          <v-col v-if="isANPR" cols="12">
+            <InputLabel class="text-capitalize" title="Gate" required />
             <v-select
-              v-model="camera.guardPost"
-              :items="guardPostOptions"
+              v-model="camera.gate"
+              :items="gateOptions"
+              item-props
               class="filter-field"
               density="comfortable"
+              :rules="[gateRule]"
+              data-test="camera-gate"
             />
-          </v-col> -->
+          </v-col>
 
           <v-col v-if="isANPR" cols="12">
             <InputLabel class="text-capitalize" title="User" required />
@@ -224,9 +231,8 @@
       </v-row>
     </v-card-actions>
 
-    <!-- Changing a camera to Exit empties its allowed list and blocklist, and
-         an Entry / Both / Residents camera changed to Visitors empties its
-         allowed list - on the camera itself. Ask before saving; the API refuses
+    <!-- An Entry / Both / Residents camera changed to Visitors or Exit
+         empties its allowed list - on the camera itself; its blocklist stays. Ask before saving; the API refuses
          the change without this confirmation. -->
     <v-dialog v-model="confirmClear" persistent width="540">
       <DialogReusablePrompt
@@ -242,7 +248,7 @@
 
     <!-- A new Entry / Both / Residents / Visitors camera, or a type change
          that means the camera should now hold plates it did not (Visitors or
-         Exit to Entry / Both / Residents, Exit to Visitors): ask first whether
+         Exit to Entry / Both / Residents; a new Exit camera too): ask first whether
          to add the site's vehicles to it now. "Not now" saves the camera
          only; its vehicles can be added later with Sync vehicles in the
          camera list. -->
@@ -264,13 +270,15 @@
           >
             Cancel
           </v-btn>
+          <!-- A short label: the long "Not now, save changes only" ran out of
+               the button. The message above says what it does. -->
           <v-btn
             class="text-none"
             variant="outlined"
             :loading="disable"
             @click="saveWithoutVehicles"
           >
-            {{ prop.mode === "edit" ? "Not now, save changes only" : "Not now, add camera only" }}
+            {{ prop.mode === "edit" ? "Save changes only" : "Add camera only" }}
           </v-btn>
           <v-btn
             class="text-none screen-btn-primary"
@@ -421,6 +429,7 @@ const camera = ref<TSiteCamera>({
   direction: "both",
   name: "",
   guardPost: null,
+  gate: null,
   status: "active",
 });
 
@@ -456,7 +465,7 @@ const message = ref("");
 const isANPR = computed(() => prop.type === "anpr");
 const isCCTV = computed(() => prop.type === "ip");
 
-const { addCamera, updateSiteCamera, testSiteCamera } = useSiteSettings();
+const { addCamera, updateSiteCamera, testSiteCamera, getAllSiteCameras } = useSiteSettings();
 
 /**
  * Two ways to say where a camera is, and the guided one is the default.
@@ -592,6 +601,7 @@ const hasChanges = computed(() => {
       camera.value.status !== prop.camera.status ||
       camera.value.category !== prop.camera.category ||
       camera.value.guardPost !== prop.camera.guardPost ||
+      (camera.value.gate ?? null) !== (prop.camera.gate ?? null) ||
       camera.value.direction !== prop.camera.direction ||
       camera.value.name !== prop.camera.name ||
       // Switching an existing camera over to the recorder fields is a change
@@ -640,8 +650,9 @@ const clearPromptMessage = computed(() =>
       "vehicles will no longer be let in through this camera. Vehicle " +
       "records and the plates on your other cameras are not affected."
     : "Every plate on this camera's allowed list will be cleared from the " +
-      "camera, including plates added directly on it, because Visitors " +
-      "cameras must not hold whitelist or season pass plates. Those vehicles " +
+      "camera, including plates added directly on it, because " +
+      `${directionLabel(camera.value.direction)} cameras must not hold ` +
+      "whitelist or season pass plates. Those vehicles " +
       "will no longer be let in through this camera. Blocked plates stay on " +
       "it. Vehicle records and the plates on your other cameras are not " +
       "affected."
@@ -726,8 +737,8 @@ const addVehiclesMessage = computed(
     `Yes adds ${plateSetWords.value} to this camera now, one plate at a ` +
     `time, and you can watch each one go on. ` +
     (prop.mode === "edit"
-      ? `Not now saves your changes only - `
-      : `Not now adds the camera only - `) +
+      ? `Save changes only saves your changes without the vehicles - `
+      : `Add camera only adds the camera without the vehicles - `) +
     `you can add them later with Sync vehicles in the camera list.`
 );
 
@@ -848,7 +859,7 @@ const clearOnAddMessage = computed(() => {
     (what
       ? ` Either way, ${what} is then added to it, one plate at a time, and ` +
         `you can watch each one go on.`
-      : ` Exit cameras receive no vehicle plates.`)
+      : ` This camera receives no vehicle plates.`)
   );
 });
 
@@ -865,7 +876,7 @@ function submit() {
     return;
   }
 
-  // A new Exit camera receives none, so only the clear question applies.
+  // A new camera that receives no plates: only the clear question applies.
   if (isNewActiveAnpr.value) {
     askClearOnAdd.value = true;
     return;
@@ -912,6 +923,7 @@ async function save(
         ...(camera.value.password ? { password: camera.value.password } : {}),
         category: camera.value.category,
         guardPost: camera.value.guardPost,
+        ...(isANPR.value && camera.value.gate ? { gate: camera.value.gate } : {}),
         direction: camera.value.direction,
         status: camera.value.status,
         name: camera.value.name,
@@ -958,6 +970,50 @@ async function save(
   }
 }
 
+/*
+ * Gate 1-20. The gates other ANPR cameras at the site already use are shown
+ * but cannot be picked (the server refuses them too). Read in the background;
+ * a failed read leaves every gate open and the server decides.
+ */
+const usedGates = ref<Map<number, string>>(new Map());
+
+async function loadUsedGates() {
+  if (!isANPR.value || !prop.site) return;
+  try {
+    const res: any = await getAllSiteCameras({ site: prop.site, type: "anpr", limit: 100 });
+    const items: any[] = Array.isArray(res?.items) ? res.items : [];
+    const used = new Map<number, string>();
+    for (const item of items) {
+      const gate = Number(item?.gate);
+      if (!Number.isInteger(gate) || gate < 1) continue;
+      if (camera.value._id && String(item?._id) === String(camera.value._id)) continue;
+      used.set(gate, String(item?.direction ?? ""));
+    }
+    usedGates.value = used;
+  } catch {
+    usedGates.value = new Map();
+  }
+}
+onMounted(loadUsedGates);
+
+const gateOptions = computed(() =>
+  Array.from({ length: 20 }, (_, index) => {
+    const gate = index + 1;
+    const taken = usedGates.value.has(gate);
+    return {
+      title: taken ? `Gate ${gate} (used by another camera)` : `Gate ${gate}`,
+      value: gate,
+      disabled: taken,
+    };
+  })
+);
+
+const gateRule = (value: unknown) => {
+  if (!value) return "Gate is required.";
+  if (usedGates.value.has(Number(value))) return "This gate is used by another camera.";
+  return true;
+};
+
 const guardPostOptions = computed(() => {
   const items = [];
 

package/components/CameraMain.vue

@@ -58,6 +58,12 @@
           <template #item.host="{ value }">
             {{ maskHostUrl(value) }}
           </template>
+          <template #item.gate="{ value }">
+            {{ value ? `Gate ${value}` : "-" }}
+          </template>
+          <template #item.status="{ value }">
+            <StatusChip class="text-capitalize" :status="value || 'active'" :label="value || 'active'" />
+          </template>
         </v-data-table>
       </AppCard>
     </v-col>
@@ -161,9 +167,9 @@
             </v-col>
 
             <v-col v-if="camera.type === 'anpr'" cols="12">
-              Guard House:
+              Gate:
               <span class="font-weight-bold">
-                {{ camera.guardPost }}
+                {{ camera.gate ? `Gate ${camera.gate}` : "-" }}
               </span>
             </v-col>
           </v-row>
@@ -378,9 +384,12 @@ const computedHeaders = computed(() => {
       { title: "URL", key: "host" },
     ]
   }else if(prop.type === "anpr"){
+  // Gate and Status beside the type (owner, 2026-10-23).
   return [
       { title: "URL", key: "host" },
       { title: "Type", key: "direction" },
+      { title: "Gate", key: "gate" },
+      { title: "Status", key: "status" },
     ]
   }
   // A THIRD TYPE FELL OFF THE END. Both arms above are early returns and the
@@ -600,7 +609,7 @@ const dialogSyncAsk = ref(false);
 const dialogSync = ref(false);
 const syncClear = ref(false);
 
-/** An active ANPR camera of a type that receives plates (not Exit). */
+/** An active ANPR camera of a type that receives plates (every type, Exit included). */
 const canSyncVehicles = computed(
   () =>
     camera.value.type === "anpr" &&

package/components/Chat/Message.vue

@@ -8,6 +8,11 @@
       <h3 class="screen-card-title">
         {{ type === "workOrder" ? "Work Order" : "Feedback" }} Chat
       </h3>
+      <div class="text-body-2 text-medium-emphasis">
+        Between the Managing Agent and the service provider on this
+        {{ type === "workOrder" ? "work order" : "feedback" }}. The other side
+        is notified of each new message.
+      </div>
     </div>
 
     <v-sheet
@@ -23,7 +28,7 @@
         v-else-if="!days.length"
         class="text-center text-medium-emphasis py-6"
       >
-        No messages yet
+        No messages yet. Send a message or a photo below to start.
       </div>
 
       <template v-for="group in days" :key="group.day">
@@ -48,7 +53,7 @@
                 :message="msg.comment"
                 :timestamp="formatTime(msg.createdAt)"
                 :senderName="isMine(msg) ? 'You' : msg.createdByName || 'User'"
-                :role="msg.createdByType"
+                :role="senderSideLabel(msg.createdByMemberType) || msg.createdByType"
                 :attachments="msg.attachments"
                 :avatarId="msg.createdByProfile"
                 @preview="openPreview"
@@ -186,7 +191,7 @@
 </template>
 
 <script setup lang="ts">
-import { groupChatByDay } from "../../utils/chat-sender.ts";
+import { groupChatByDay, senderSideLabel } from "../../utils/chat-sender.ts";
 
 /**
  * The comment thread under a feedback or a work order.

package/components/Snackbar.vue

@@ -6,6 +6,16 @@
     :z-index="100000000"
   >
     {{ props.text }}
+    <!-- A second line ("Opening Barrier Success."); a failure is red on a
+         light pill so it reads on every toast colour. -->
+    <div
+      v-if="props.detail"
+      class="app-toast__detail"
+      :class="{ 'app-toast__detail--error': props.detailTone === 'error' }"
+      data-test="app-toast-detail"
+    >
+      {{ props.detail }}
+    </div>
 
     <template #actions>
       <v-btn class="app-toast__close" variant="text" @click="snackbar = false">
@@ -52,5 +62,31 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  /** A second line under `text` (e.g. "Opening Barrier Failed."). */
+  detail: {
+    type: String,
+    default: "",
+  },
+  /** "error" draws `detail` in red. */
+  detailTone: {
+    type: String as PropType<"default" | "error">,
+    default: "default",
+  },
 });
 </script>
+
+<style scoped>
+.app-toast__detail {
+  margin-top: 4px;
+}
+
+.app-toast__detail--error {
+  display: inline-block;
+  margin-top: 6px;
+  padding: 2px 8px;
+  border-radius: 6px;
+  background: rgb(var(--v-theme-surface));
+  color: rgb(var(--v-theme-error));
+  font-weight: 700;
+}
+</style>

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/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 }]
       : []),