@7365admin1/layer-common 4.1.3-staging.250 → 4.1.3-staging.252

package/components/CameraBulkImportDialog.vue

@@ -0,0 +1,330 @@
+<template>
+  <v-card width="100%" class="screen-modal">
+    <v-card-title class="text-capitalize">Import Cameras</v-card-title>
+
+    <v-card-text class="screen-modal__body pa-5">
+      <!-- Step 1 — the file. -->
+      <template v-if="!results.length">
+        <p class="text-body-2 mb-4">
+          Upload the camera survey sheet as a CSV file. Each row is one camera:
+          its name, the recorder it is on, and its channel number on that
+          recorder. The live-view address is worked out for you — do not type
+          one.
+        </p>
+
+        <v-file-input
+          v-model="file"
+          accept=".csv,text/csv"
+          density="comfortable"
+          variant="outlined"
+          prepend-icon=""
+          prepend-inner-icon="mdi-file-delimited-outline"
+          label="Camera survey sheet (.csv)"
+          :disabled="busy"
+          @update:model-value="readFile"
+        />
+
+        <v-btn
+          variant="text"
+          size="small"
+          class="text-none px-0"
+          prepend-icon="mdi-download"
+          :disabled="busy"
+          @click="downloadTemplate"
+        >
+          Download a blank sheet
+        </v-btn>
+
+        <v-alert
+          v-if="fileError"
+          type="error"
+          variant="tonal"
+          density="comfortable"
+          class="mt-4"
+          :text="fileError"
+        />
+
+        <v-alert
+          v-if="notes.length"
+          type="info"
+          variant="tonal"
+          density="comfortable"
+          class="mt-4"
+        >
+          <div v-for="note in notes" :key="note">{{ note }}</div>
+        </v-alert>
+
+        <p class="text-caption mt-4 mb-0">
+          Required columns: camera_name, recorder_id, channel_number,
+          for_cctv_wall, for_virtual_patrol, is_anpr. ANPR cameras are set up in
+          the ANPR section — mark them <strong>is_anpr = Yes</strong> and they
+          will be left out of this import.
+        </p>
+      </template>
+
+      <!-- Step 2 — what will happen, or what happened. -->
+      <template v-else>
+        <v-alert
+          :type="committed ? (summary.rejected ? 'warning' : 'success') : 'info'"
+          variant="tonal"
+          density="comfortable"
+          class="mb-4"
+        >
+          {{ summaryText }}
+        </v-alert>
+
+        <v-alert
+          v-if="!committed && notes.length"
+          type="info"
+          variant="tonal"
+          density="comfortable"
+          class="mb-4"
+        >
+          <div v-for="note in notes" :key="note">{{ note }}</div>
+        </v-alert>
+
+        <v-data-table
+          :headers="resultHeaders"
+          :items="results"
+          density="compact"
+          fixed-header
+          hide-default-footer
+          :items-per-page="-1"
+          style="max-height: 420px"
+        >
+          <template #item.outcome="{ value }">
+            <v-chip size="small" :color="outcomeColour(value)" variant="tonal">
+              {{ outcomeLabel(value) }}
+            </v-chip>
+          </template>
+          <template #item.channel="{ value }">
+            {{ value ?? "—" }}
+          </template>
+          <template #item.reason="{ value }">
+            <span class="text-body-2">{{ value ?? "" }}</span>
+          </template>
+        </v-data-table>
+      </template>
+    </v-card-text>
+
+    <v-card-actions class="screen-modal__footer">
+      <v-row no-gutters>
+        <v-col cols="6" class="pr-2">
+          <v-btn
+            block
+            variant="outlined"
+            class="text-none screen-btn-ghost"
+            :disabled="busy"
+            @click="close"
+            :text="committed ? 'Close' : 'Cancel'"
+          />
+        </v-col>
+        <v-col cols="6" class="pl-2">
+          <v-btn
+            v-if="!committed"
+            block
+            variant="flat"
+            class="text-none screen-btn-primary"
+            :disabled="busy || !summary.ok"
+            :loading="busy"
+            @click="commit"
+            :text="summary.ok ? `Add ${summary.ok} camera(s)` : 'Nothing to add'"
+          />
+          <v-btn
+            v-else
+            block
+            variant="flat"
+            class="text-none screen-btn-primary"
+            @click="startOver"
+            text="Import another file"
+          />
+        </v-col>
+      </v-row>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import useSiteSettings from "../composables/useSiteSettings";
+import { cameraCsvTemplate, parseCameraCsv } from "../utils/camera-csv";
+
+/**
+ * Adding a site's cameras from the technician's survey sheet.
+ *
+ * A ~150-camera site could only ever be entered one camera at a time, through a
+ * two-field modal, using a live-view address that nobody outside the video
+ * service can work out. This screen takes the survey sheet instead.
+ *
+ * **The server decides everything.** This component parses the file and shows
+ * what came back; it does not judge a row. The preview and the commit are the
+ * same server call with `commit` flipped, so what a person approves here cannot
+ * disagree with what is then written — the failure that makes a bulk import
+ * frightening. That is also why there is no "fix it here" editing: a corrected
+ * sheet is re-uploaded, and the file on disk stays the record of what was
+ * asked for.
+ */
+
+/** The rows one file may carry. The server enforces the same number. */
+const MAX_ROWS = 200;
+
+const prop = defineProps({
+  site: {
+    type: String,
+    required: true,
+  },
+});
+
+const emit = defineEmits(["cancel", "imported"]);
+
+const { bulkImportSiteCameras } = useSiteSettings();
+
+const file = ref<File | File[] | null>(null);
+const fileError = ref("");
+const notes = ref<string[]>([]);
+const rows = ref<Array<Record<string, string>>>([]);
+const results = ref<Array<Record<string, any>>>([]);
+const summary = ref<Record<string, number>>({
+  total: 0,
+  ok: 0,
+  created: 0,
+  skipped: 0,
+  rejected: 0,
+});
+const committed = ref(false);
+const busy = ref(false);
+
+const resultHeaders = [
+  { title: "Row", key: "row", width: 70 },
+  { title: "Camera Name", key: "name" },
+  { title: "Channel", key: "channel", width: 90 },
+  { title: "Result", key: "outcome", width: 140 },
+  { title: "Reason", key: "reason" },
+];
+
+const summaryText = computed(() => {
+  if (!committed.value) {
+    return `${summary.value.ok} camera(s) will be added, ${summary.value.skipped} already at this site, ${summary.value.rejected} cannot be added. Nothing has been saved yet.`;
+  }
+  return `${summary.value.created} camera(s) added, ${summary.value.skipped} already at this site, ${summary.value.rejected} not added.`;
+});
+
+function outcomeLabel(outcome: string) {
+  if (outcome === "ok") return "Will be added";
+  if (outcome === "created") return "Added";
+  if (outcome === "skipped-duplicate") return "Already there";
+  return "Not added";
+}
+
+function outcomeColour(outcome: string) {
+  if (outcome === "created") return "success";
+  if (outcome === "ok") return "info";
+  if (outcome === "skipped-duplicate") return "warning";
+  return "error";
+}
+
+function reset() {
+  fileError.value = "";
+  notes.value = [];
+  rows.value = [];
+  results.value = [];
+  summary.value = { total: 0, ok: 0, created: 0, skipped: 0, rejected: 0 };
+  committed.value = false;
+}
+
+function startOver() {
+  reset();
+  file.value = null;
+}
+
+function close() {
+  emit("cancel");
+}
+
+function downloadTemplate() {
+  const blob = new Blob([cameraCsvTemplate()], { type: "text/csv" });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = "camera-survey-sheet.csv";
+  link.click();
+  URL.revokeObjectURL(url);
+}
+
+/** What the sheet carries that a camera record has no field for. */
+function describeUnstored(columns: string[]) {
+  if (!columns.length) return [];
+  return [
+    `These columns are read but not stored, because a camera record has nowhere to keep them: ${columns.join(", ")}. Use them to name the cameras and to build the patrol route in the right order.`,
+  ];
+}
+
+async function readFile(selected: File | File[] | null) {
+  reset();
+
+  const chosen = Array.isArray(selected) ? selected[0] : selected;
+  if (!chosen) return;
+
+  const parsed = parseCameraCsv(await chosen.text());
+
+  if (parsed.missingColumns.length) {
+    fileError.value = `This file is missing: ${parsed.missingColumns.join(", ")}. Download the blank sheet to see the columns it needs.`;
+    return;
+  }
+
+  if (!parsed.rows.length) {
+    fileError.value = "This file has column headings but no cameras in it.";
+    return;
+  }
+
+  if (parsed.rows.length > MAX_ROWS) {
+    fileError.value = `This file has ${parsed.rows.length} rows. Import up to ${MAX_ROWS} at a time — split it and import each part.`;
+    return;
+  }
+
+  notes.value = [
+    ...describeUnstored([...parsed.unstoredColumns]),
+    ...(parsed.unknownColumns.length
+      ? [
+          `These columns are not recognised and are ignored: ${parsed.unknownColumns.join(", ")}.`,
+        ]
+      : []),
+  ];
+
+  rows.value = parsed.rows;
+  await send(false);
+}
+
+async function send(commitRows: boolean) {
+  busy.value = true;
+  try {
+    const response = await bulkImportSiteCameras({
+      site: prop.site,
+      rows: rows.value,
+      commit: commitRows,
+    });
+
+    results.value = response?.results ?? [];
+    summary.value = response?.results
+      ? response.summary
+      : { total: 0, ok: 0, created: 0, skipped: 0, rejected: 0 };
+    committed.value = Boolean(response?.committed);
+
+    if (committed.value) emit("imported", summary.value);
+  } catch (error: any) {
+    // A refusal from the server is shown as it was written — it is a sentence
+    // for the person at this screen, and rewriting it here would lose the one
+    // thing that tells them what to do next.
+    fileError.value =
+      error?.data?.message ||
+      error?.message ||
+      "The cameras could not be checked. Try again.";
+    results.value = [];
+  } finally {
+    busy.value = false;
+  }
+}
+
+function commit() {
+  return send(true);
+}
+</script>

package/components/CameraMain.vue

@@ -16,9 +16,29 @@
             <AppButton v-if="!prop.readOnly" @click="dialogAdd = true">
               Add
             </AppButton>
+            <AppButton
+              v-if="!prop.readOnly && prop.type === 'ip'"
+              variant="ghost"
+              @click="dialogImport = true"
+            >
+              Import
+            </AppButton>
           </template>
 
           <template #right>
+            <!-- Searching the loaded list, not the server: the endpoint takes
+                 no search parameter, and every camera at the site is already
+                 here. -->
+            <v-text-field
+              v-model.trim="search"
+              class="filter-field mr-3"
+              density="compact"
+              hide-details
+              variant="outlined"
+              prepend-inner-icon="mdi-magnify"
+              placeholder="Search name or address"
+              style="max-width: 260px"
+            />
             <local-pagination
               v-model="page"
               :length="pages"
@@ -29,7 +49,7 @@
 
         <v-data-table
           :headers="computedHeaders"
-          :items="items"
+          :items="visibleItems"
           fixed-header
           hide-default-footer
           @click:row="handleRowClick"
@@ -55,6 +75,14 @@
       />
     </v-dialog>
 
+    <v-dialog v-model="dialogImport" persistent width="900" scrollable>
+      <CameraBulkImportDialog
+        :site="prop.site"
+        @cancel="dialogImport = false"
+        @imported="handleImported"
+      />
+    </v-dialog>
+
     <v-dialog v-model="dialogEdit" persistent width="450">
       <CameraForm
         title="Edit Camera"
@@ -312,31 +340,112 @@ const computedHeaders = computed(() => {
   return prop.headers;
 });
 
+/**
+ * Every camera at the site, paged locally.
+ *
+ * This asked the server for page 1 with no `limit`, against a server default of
+ * 10 — so a site with more than ten cameras showed ten, and the pager below was
+ * driven by the server's page count while the search box did not exist. At 150
+ * cameras that is fifteen server pages and no way to find one by name.
+ *
+ * Now the list is fetched once, in server pages of `PAGE_SIZE`, and searched
+ * and paged in the browser. Deliberately NOT one unbounded request: the
+ * endpoint accepts a `limit` with no upper bound, and asking it for everything
+ * is how one large site becomes a slow page for every site. `MAX_PAGES` is the
+ * backstop, and when it is reached the toolbar says so rather than quietly
+ * showing part of the list.
+ *
+ * ponytail: searching and paging in the browser, because the endpoint has no
+ * search parameter and a site's camera list is small enough to hold. If a site
+ * ever passes `PAGE_SIZE * MAX_PAGES`, this wants a server-side search instead.
+ */
+const PAGE_SIZE = 100;
+const MAX_PAGES = 5;
+const ROWS_PER_PAGE = 10;
+
 const items = ref<Array<TCamera>>([]);
 const page = ref(1);
 const pages = ref(0);
 const pageRange = ref("-- - -- of --");
+const search = ref("");
+const truncated = ref(false);
 
 const { getAllSiteCameras, deleteSiteCameraById } = useSiteSettings();
+
+async function getAllCamerasAtSite() {
+  const all: Array<TCamera> = [];
+  let serverPages = 1;
+  let serverPage = 1;
+
+  while (serverPage <= serverPages && serverPage <= MAX_PAGES) {
+    const response = await getAllSiteCameras({
+      site: prop.site,
+      type: prop.type,
+      page: serverPage,
+      limit: PAGE_SIZE,
+    });
+
+    all.push(...((response?.items ?? []) as Array<TCamera>));
+    serverPages = Number(response?.pages) || 1;
+    serverPage += 1;
+  }
+
+  truncated.value = serverPages > MAX_PAGES;
+  return all;
+}
+
 const { data: getCameraReq, refresh: getCameraRefresh } =
   await useLazyAsyncData(
     `get-site-${prop.site}-${prop.type}-cameras`,
-    () =>
-      getAllSiteCameras({ site: prop.site, type: prop.type, page: page.value }),
-    {
-      watch: [page],
-    }
+    getAllCamerasAtSite
   );
 
+/** The site's cameras matching the search box, in the order they came back. */
+const matchingItems = computed(() => {
+  const needle = search.value.toLowerCase();
+  if (!needle) return items.value;
+
+  return items.value.filter((camera: any) =>
+    [camera?.name, camera?.host].some((field) =>
+      String(field ?? "").toLowerCase().includes(needle)
+    )
+  );
+});
+
+/** One page of them. */
+const visibleItems = computed(() =>
+  matchingItems.value.slice(
+    (page.value - 1) * ROWS_PER_PAGE,
+    page.value * ROWS_PER_PAGE
+  )
+);
+
 watchEffect(() => {
   if (getCameraReq.value) {
-    items.value = getCameraReq.value.items;
-    pageRange.value = getCameraReq.value.pageRange;
-    pages.value = getCameraReq.value.pages;
+    items.value = getCameraReq.value as Array<TCamera>;
   }
 });
 
+// A search that leaves fewer pages than the one being looked at would otherwise
+// show an empty table with no explanation.
+watch(search, () => {
+  page.value = 1;
+});
+
+watchEffect(() => {
+  const total = matchingItems.value.length;
+  pages.value = Math.max(1, Math.ceil(total / ROWS_PER_PAGE));
+
+  const first = total ? (page.value - 1) * ROWS_PER_PAGE + 1 : 0;
+  const last = Math.min(page.value * ROWS_PER_PAGE, total);
+
+  pageRange.value = total
+    ? `${first} - ${last} of ${total}${truncated.value ? "+" : ""}`
+    : "0 - 0 of 0";
+});
+
 const dialogAdd = ref(false);
+const dialogImport = ref(false);
 const dialogEdit = ref(false);
 const dialogPreview = ref(false);
 const dialogDelete = ref(false);
@@ -363,6 +472,13 @@ function openDialogDelete() {
   if (dialogPreview.value) dialogPreview.value = false;
 }
 
+function handleImported(summary: { created?: number }) {
+  // The dialog stays open on purpose — it is showing the per-row result, which
+  // is the only record of what happened to a 150-row file. The list behind it
+  // is refreshed so closing it shows the truth.
+  if (summary?.created) getCameraRefresh();
+}
+
 function handleError(msg: string) {
   showMessage(msg, "error");
 }

package/components/PublicOnboarding/ContractorRegistrationForm.vue

@@ -146,7 +146,14 @@
             hide-details
             class="mb-2"
           />
-          <InputPhoneNumberV2 v-model="member.contact" density="comfortable" hide-details />
+          <InputPhoneNumberV2 v-model="member.contact" density="comfortable" hide-details class="mb-2" />
+          <v-text-field
+            v-model="member.plateNumber"
+            label="Vehicle Number (Optional)"
+            density="comfortable"
+            variant="outlined"
+            hide-details
+          />
         </div>
 
         <v-btn variant="outlined" block class="mb-3" prepend-icon="mdi-plus" @click="addDraftMember">
@@ -192,7 +199,7 @@ const visitor = reactive({
   remarks: "",
 });
 
-type TDraftMember = { name: string; nric: string; contact: string };
+type TDraftMember = { name: string; nric: string; contact: string; plateNumber: string };
 const members = ref<TDraftMember[]>([]);
 const draftMembers = ref<TDraftMember[]>([]);
 const showMembersDialog = ref(false);
@@ -201,12 +208,12 @@ watch(showMembersDialog, (open) => {
   if (open) {
     draftMembers.value = members.value.length
       ? members.value.map((m) => ({ ...m }))
-      : [{ name: "", nric: "", contact: "" }];
+      : [{ name: "", nric: "", contact: "", plateNumber: "" }];
   }
 });
 
 function addDraftMember() {
-  draftMembers.value.push({ name: "", nric: "", contact: "" });
+  draftMembers.value.push({ name: "", nric: "", contact: "", plateNumber: "" });
 }
 
 function saveMembers() {
@@ -234,6 +241,7 @@ async function submit() {
       contractorType: visitor.contractorType || undefined,
       name: visitor.name,
       contact: visitor.contact,
+      expectedCheckIn: visitor.expectedCheckIn || undefined,
       nric: visitor.nric || undefined,
       email: visitor.email || undefined,
       block: visitor.block || undefined,
@@ -246,7 +254,11 @@ async function submit() {
     };
 
     const res: any = await createVisitor(prop.site, payload);
-    emit("done", res?.status || "pending");
+    emit("done", res?.status || "pending", res?._id, {
+      name: visitor.name,
+      expectedCheckIn: visitor.expectedCheckIn,
+      members: res?.members || [],
+    });
   } catch (error: any) {
     submitError.value =
       error?.data?.message || error?.message || "Unable to submit your registration. Please try again.";

package/components/PublicOnboarding/ShareDialog.vue

@@ -0,0 +1,93 @@
+<template>
+  <v-dialog :model-value="modelValue" max-width="380" @update:model-value="emit('update:modelValue', $event)">
+    <v-card class="pa-4">
+      <div class="d-flex justify-space-between align-center mb-1">
+        <span class="text-subtitle-1 font-weight-bold">Share</span>
+        <v-btn icon variant="text" size="small" @click="emit('update:modelValue', false)">
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </div>
+      <p class="text-caption text-medium-emphasis mb-4">As a message</p>
+
+      <div class="d-flex ga-4 mb-5">
+        <a :href="whatsappUrl" target="_blank" rel="noopener" class="share-icon" aria-label="Share via WhatsApp">
+          <v-avatar color="#25D366" size="44"><v-icon color="white">mdi-whatsapp</v-icon></v-avatar>
+        </a>
+        <a :href="telegramUrl" target="_blank" rel="noopener" class="share-icon" aria-label="Share via Telegram">
+          <v-avatar color="#229ED9" size="44"><v-icon color="white">mdi-telegram</v-icon></v-avatar>
+        </a>
+        <button
+          v-if="canNativeShare"
+          type="button"
+          class="share-icon share-icon--btn"
+          aria-label="More share options"
+          @click="nativeShare"
+        >
+          <v-avatar color="grey-darken-2" size="44"><v-icon color="white">mdi-dots-horizontal</v-icon></v-avatar>
+        </button>
+      </div>
+
+      <p class="text-caption text-medium-emphasis mb-2">Or copy message</p>
+      <div class="d-flex ga-2 align-start">
+        <v-textarea :model-value="message" readonly density="compact" variant="outlined" rows="3" hide-details auto-grow />
+        <v-btn color="error" variant="flat" @click="copy">COPY</v-btn>
+      </div>
+
+      <v-snackbar v-model="copied" timeout="1800" location="bottom">Copied</v-snackbar>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  modelValue: boolean;
+  message: string;
+  link: string;
+}>();
+
+const emit = defineEmits<{ (e: "update:modelValue", value: boolean): void }>();
+
+// No generic web-share URL exists for Messenger/WeChat without registering
+// an app (Facebook's Send Dialog needs an App ID, WeChat sharing needs its
+// own SDK and is region-gated) - WhatsApp and Telegram both have simple,
+// no-auth share URLs, and the native share sheet (mobile browsers) covers
+// "any other app installed" without us hand-integrating each one.
+const whatsappUrl = computed(() => `https://wa.me/?text=${encodeURIComponent(props.message)}`);
+const telegramUrl = computed(
+  () => `https://t.me/share/url?url=${encodeURIComponent(props.link)}&text=${encodeURIComponent(props.message)}`,
+);
+
+const canNativeShare = computed(() => import.meta.client && typeof navigator !== "undefined" && !!navigator.share);
+
+async function nativeShare() {
+  try {
+    await navigator.share({ text: props.message, url: props.link });
+  } catch {
+    // User cancelled the share sheet, or the browser refused - no action
+    // needed, the dialog stays open with the other options still available.
+  }
+}
+
+const copied = ref(false);
+
+async function copy() {
+  try {
+    await navigator.clipboard.writeText(props.message);
+    copied.value = true;
+  } catch {
+    // Clipboard API can be unavailable - copy-icon fallback isn't worth
+    // the added complexity here, View Link on the card still works.
+  }
+}
+</script>
+
+<style scoped>
+.share-icon {
+  display: inline-flex;
+  text-decoration: none;
+  border: none;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+}
+</style>

package/components/PublicOnboarding/VisitorQrCodeLinksCard.vue

@@ -0,0 +1,113 @@
+<template>
+  <v-card class="pa-6" elevation="2">
+    <div class="d-flex flex-column align-center mb-4">
+      <v-avatar color="grey-darken-3" size="48" class="mb-3">
+        <v-icon icon="mdi-qrcode" color="white" size="24" />
+      </v-avatar>
+      <h1 class="text-subtitle-1 font-weight-bold text-center">Visitor QR Code Links</h1>
+      <p class="text-caption text-medium-emphasis text-center mt-1">
+        {{ status === "approved" ? "Invitation generated successful!" : "Registration submitted - awaiting approval" }}
+      </p>
+    </div>
+
+    <p class="text-body-2 mb-4">
+      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-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))">
+            Copy Link
+          </v-btn>
+          <v-btn variant="outlined" color="error" size="small" class="flex-grow-1" :href="linkFor(m._id)" target="_blank">
+            View Link
+          </v-btn>
+        </div>
+      </div>
+    </template>
+
+    <v-btn color="error" variant="flat" block size="large" class="mt-2" @click="showShare = true">
+      Share
+    </v-btn>
+
+    <v-snackbar v-model="copied" timeout="1800" location="bottom">Link copied</v-snackbar>
+
+    <PublicOnboardingShareDialog v-model="showShare" :message="shareMessage" :link="leadLink" />
+  </v-card>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  leadId: string;
+  leadName: string;
+  status: string;
+  expectedCheckIn?: string | null;
+  members: { _id: string; name: string }[];
+}>();
+
+function linkFor(id: string) {
+  const origin = import.meta.client ? window.location.origin : "";
+  return `${origin}/public-view/visitor-onboarding/pass/${id}`;
+}
+
+const leadLink = computed(() => linkFor(props.leadId));
+
+const arrivalDateDisplay = computed(() => {
+  if (!props.expectedCheckIn) return "";
+  const d = new Date(props.expectedCheckIn);
+  if (Number.isNaN(d.getTime())) return "";
+  return `${d.getDate()}/${d.getMonth() + 1}/${d.getFullYear()}`;
+});
+
+const shareMessage = computed(() => {
+  const lines = [
+    `Hi ${props.leadName},`,
+    "",
+    `Your visit registration has been submitted${props.members.length ? " along with your team" : ""}.`,
+  ];
+  if (arrivalDateDisplay.value) lines.push("", `Arrival: ${arrivalDateDisplay.value}`);
+  lines.push("", `Link: ${leadLink.value}`);
+  if (props.members.length) {
+    lines.push("", "Team Members:");
+    for (const m of props.members) {
+      lines.push(m.name, `Link: ${linkFor(m._id)}`, "");
+    }
+  }
+  return lines.join("\n");
+});
+
+const showShare = ref(false);
+const copied = ref(false);
+
+async function copyLink(link: string) {
+  try {
+    await navigator.clipboard.writeText(link);
+    copied.value = true;
+  } catch {
+    // Clipboard API can be unavailable (insecure context, permission
+    // denied) - the visitor still has View Link as a fallback.
+  }
+}
+</script>
+
+<style scoped>
+.link-row {
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: 4px;
+}
+</style>

package/components/VisitorManagement.vue

@@ -428,7 +428,7 @@
             {{ item.arrivalTime ?? "N/A" }}
           </span>
 
-          <span v-if="!item.checkIn && canUpdateVisitor">
+          <span v-if="!item.checkIn && item?.status !== 'pending' && item?.status !== 'rejected' && canUpdateVisitor">
             <span class="d-flex align-center ga-2 cursor-pointer">
               <v-icon
                 icon="mdi-clock-time-eight-outline"

package/composables/usePublicVisitorOnboarding.ts

@@ -61,6 +61,19 @@ export default function usePublicVisitorOnboarding() {
     );
   }
 
+  // The QR the preview page renders once approved - the SAME `qrCodeId`
+  // check-in credential a staff-invited visitor gets (scanned by a guard
+  // through ScanVisitorQRCode.vue, same check-in dialog/flow). It's minted
+  // (or reused if still valid) on every call and expires 5 minutes after
+  // being minted, so the preview page re-calls this periodically rather
+  // than fetching it once.
+  function getSelfServiceQrCode(id: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/visitors/self-service/qr-code/${id}`,
+      { method: "GET" },
+    );
+  }
+
   return {
     getOnboardingSettings,
     getBlocks,
@@ -69,5 +82,6 @@ export default function usePublicVisitorOnboarding() {
     createVisitor,
     getOvernightParkingHours,
     getSelfServicePreview,
+    getSelfServiceQrCode,
   };
 }

package/composables/useSiteSettings.ts

@@ -88,10 +88,20 @@ export default function () {
     );
   }
 
+  /**
+   * One page of a site's cameras.
+   *
+   * `limit` is the reason this signature changed: the server defaults to 10,
+   * and every caller that omitted it was showing the first ten cameras of a
+   * site and no way to reach the rest. The server accepts a `limit` of 10 or
+   * more with no upper bound, so a caller picks a real page size rather than
+   * asking for everything.
+   */
   async function getAllSiteCameras(payload: {
     site: string;
     type?: string;
     page?: number;
+    limit?: number;
   }) {
     return await useNuxtApp().$api<Record<string, any>>(`/api/site-cameras`, {
       method: "GET",
@@ -99,6 +109,32 @@ export default function () {
     });
   }
 
+  /**
+   * Many cameras in one request, from the technician's survey sheet.
+   *
+   * The same call previews and commits, and the server decides both — `commit:
+   * false` validates every row and writes nothing, `commit: true` writes the
+   * rows that passed. Every row comes back with an outcome and, when it was not
+   * written, a sentence saying why.
+   *
+   * Rows carry the sheet's own column names; the server derives each camera's
+   * live-view address from the recorder and channel number, because that
+   * address is a relay page nobody outside the video service can work out.
+   */
+  async function bulkImportSiteCameras(payload: {
+    site: string;
+    rows: Array<Record<string, string>>;
+    commit: boolean;
+  }) {
+    return await useNuxtApp().$api<Record<string, any>>(
+      `/api/site-cameras/bulk`,
+      {
+        method: "POST",
+        body: payload,
+      }
+    );
+  }
+
   /**
    * The monitoring wall for one site.
    *
@@ -223,6 +259,7 @@ export default function () {
     updateSite,
     addCamera,
     getAllSiteCameras,
+    bulkImportSiteCameras,
     getSiteWall,
     getSiteHealth,
     setSiteGuardPosts,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.1.3-staging.250",
+  "version": "4.1.3-staging.252",
   "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/camera-csv.ts

@@ -0,0 +1,169 @@
+/**
+ * Reading the technician's camera survey sheet.
+ *
+ * The file a person uploads is the file they were asked to fill in: the column
+ * names here are the survey sheet's own, so nothing has to be renamed by hand
+ * between surveying a site and importing it.
+ *
+ * This does one job — turn text into rows — and deliberately judges nothing.
+ * Whether a row is valid, whether it is a duplicate, whether its recorder is
+ * one the video service knows about: all of that is decided by the server, once,
+ * and shown back per row. A second opinion here would be a second opinion to
+ * disagree with the first.
+ */
+
+/** The columns the sheet is asked for. Order is the order shown in a preview. */
+export const CAMERA_CSV_COLUMNS = [
+  "camera_name",
+  "recorder_id",
+  "channel_number",
+  "physical_location",
+  "for_cctv_wall",
+  "for_virtual_patrol",
+  "patrol_order",
+  "zone_or_block",
+  "is_anpr",
+  "notes",
+] as const;
+
+/** Columns a camera record has no field for. Surveyed, shown, never stored. */
+export const CAMERA_CSV_UNSTORED_COLUMNS = [
+  "physical_location",
+  "patrol_order",
+  "zone_or_block",
+  "notes",
+] as const;
+
+/** Columns the sheet cannot do without. */
+export const CAMERA_CSV_REQUIRED_COLUMNS = [
+  "camera_name",
+  "recorder_id",
+  "channel_number",
+  "for_cctv_wall",
+  "for_virtual_patrol",
+  "is_anpr",
+] as const;
+
+export type CameraCsvRow = Record<string, string>;
+
+export type CameraCsvParse = {
+  /** The header, as spelled in the file, in file order. */
+  columns: string[];
+  rows: CameraCsvRow[];
+  /** Required columns the file does not have. Empty means it is usable. */
+  missingColumns: string[];
+  /** Columns present that we will read but cannot store. */
+  unstoredColumns: string[];
+  /** Columns present that mean nothing to us at all. Harmless, worth saying. */
+  unknownColumns: string[];
+};
+
+/**
+ * One line of CSV, respecting quotes.
+ *
+ * Written rather than pulled in, because the whole of it is this: a quoted
+ * field may contain commas and `""` is an escaped quote. A spreadsheet export
+ * of ten short columns needs nothing else, and a parser dependency here would
+ * be a build-time cost for a hundred lines of text typed by a technician.
+ */
+function splitLine(line: string): string[] {
+  const values: string[] = [];
+  let value = "";
+  let quoted = false;
+
+  for (let index = 0; index < line.length; index += 1) {
+    const char = line[index];
+
+    if (quoted) {
+      if (char !== '"') {
+        value += char;
+      } else if (line[index + 1] === '"') {
+        value += '"';
+        index += 1;
+      } else {
+        quoted = false;
+      }
+      continue;
+    }
+
+    if (char === '"') {
+      quoted = true;
+    } else if (char === ",") {
+      values.push(value);
+      value = "";
+    } else {
+      value += char;
+    }
+  }
+
+  values.push(value);
+  return values.map((item) => item.trim());
+}
+
+/** A header cell, normalised to the sheet's snake_case spelling. */
+function normaliseColumn(value: string): string {
+  return value
+    .trim()
+    .toLowerCase()
+    .replace(/^/, "")
+    .replace(/[\s-]+/g, "_")
+    .replace(/[^a-z0-9_]/g, "");
+}
+
+/**
+ * Turn an uploaded CSV into rows.
+ *
+ * Tolerant where tolerance is free — a UTF-8 BOM from Excel, `Camera Name` for
+ * `camera_name`, CRLF endings, a trailing blank line — and silent about
+ * nothing: a missing required column or an extra unrecognised one is reported
+ * rather than quietly worked around.
+ */
+export function parseCameraCsv(text: string): CameraCsvParse {
+  const lines = String(text ?? "")
+    .replace(/^/, "")
+    .split(/\r?\n/)
+    .filter((line) => line.trim().length > 0);
+
+  if (!lines.length) {
+    return {
+      columns: [],
+      rows: [],
+      missingColumns: [...CAMERA_CSV_REQUIRED_COLUMNS],
+      unstoredColumns: [],
+      unknownColumns: [],
+    };
+  }
+
+  const columns = splitLine(lines[0]).map(normaliseColumn);
+
+  const rows = lines.slice(1).map((line) => {
+    const values = splitLine(line);
+    const row: CameraCsvRow = {};
+    columns.forEach((column, index) => {
+      if (column) row[column] = values[index] ?? "";
+    });
+    return row;
+  });
+
+  const known = new Set<string>(CAMERA_CSV_COLUMNS);
+
+  return {
+    columns,
+    rows,
+    missingColumns: CAMERA_CSV_REQUIRED_COLUMNS.filter(
+      (column) => !columns.includes(column),
+    ),
+    unstoredColumns: CAMERA_CSV_UNSTORED_COLUMNS.filter((column) =>
+      columns.includes(column),
+    ),
+    unknownColumns: columns.filter((column) => column && !known.has(column)),
+  };
+}
+
+/** A blank sheet, so nobody has to guess the column names. */
+export function cameraCsvTemplate(): string {
+  return [
+    CAMERA_CSV_COLUMNS.join(","),
+    "Block A Lobby,nvr-1.example.org,7,\"Block A, Level 1 lift lobby\",Yes,Yes,1,Block A,No,Faces west",
+  ].join("\n");
+}