@7365admin1/layer-common 4.1.3-staging.251 → 4.1.3-staging.253

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/HidAccessLogDashboard.vue

@@ -89,15 +89,9 @@
 
       <!-- Staging's hover-the-full-name tooltip, kept. -->
       <template #[`item.name`]="{ item }">
+        <!-- Client requirement (2026-08-26): no face photo on an access log row.
+             The reader keeps the image; we neither fetch nor hold one. -->
         <span class="hid-log-name app-cell--strong">
-          <v-avatar
-            v-if="item.faceImage"
-            size="34"
-            rounded="lg"
-            class="hid-face-avatar"
-          >
-            <v-img :src="item.faceImage" cover />
-          </v-avatar>
           <span>{{ item.name }}</span>
           <v-tooltip
             v-if="item.name && item.name !== 'N/A'"
@@ -314,7 +308,6 @@ type AccessRow = {
   name: string;
   hidUserId: string;
   facialData: string;
-  faceImage?: string;
   unit: string;
   method: string;
   lastAccessTime: string;
@@ -371,7 +364,6 @@ type JsPdf = {
 const {
   getReaders,
   getLogs,
-  getUserImage,
   getReaderUsers,
   getReaderAccessLogs,
 } = useHidAmico();
@@ -384,7 +376,6 @@ const visitorRecords = ref<Record<string, HidAccessRecord>>({});
 const logs = ref<HidAccessRecord[]>([]);
 const liveAccessLogs = ref<HidAccessRecord[]>([]);
 const administratorUserIds = ref<Set<number>>(new Set());
-const userImages = ref<Record<string, string>>({});
 const selectedReaderId = ref("");
 const activeTab = ref<AccessTab>("all");
 const search = ref("");
@@ -470,7 +461,6 @@ const selectedHistoryRows = computed<AccessRow[]>(() => {
     name: selectedHistoryRow.value?.name || "N/A",
     hidUserId: selectedHistoryRow.value?.hidUserId || "N/A",
     facialData: selectedHistoryRow.value?.facialData || "N/A",
-    faceImage: selectedHistoryRow.value?.faceImage,
     unit: selectedHistoryRow.value?.unit || "N/A",
     method: getAccessMethod({}, log),
     lastAccessTime: formatDate(getLogAccessDateValue(log)),
@@ -486,7 +476,6 @@ const selectedHistoryRows = computed<AccessRow[]>(() => {
     name: selectedHistoryRow.value?.name || "N/A",
     hidUserId: selectedHistoryRow.value?.hidUserId || "N/A",
     facialData: selectedHistoryRow.value?.facialData || "N/A",
-    faceImage: selectedHistoryRow.value?.faceImage,
     unit: selectedHistoryRow.value?.unit || "N/A",
     method: getAccessMethod({}, { payload: { rawAccessLog: log } }),
     lastAccessTime: formatDate(getAccessLogTime(log, {})),
@@ -700,14 +689,6 @@ async function loadDashboard() {
     serverPageRange.value = String(
       hidAccessLogResponse?.pageRange ?? hidAccessLogResponse?.data?.pageRange ?? "",
     );
-    const accessLogUserIds = getAccessLogUserIds(liveItems);
-    const accessLogImageCandidates = [...accessLogUserIds].map((hidUserId) => ({
-      hidUserId: String(hidUserId),
-    }));
-    await loadUserImages(
-      [...readerUsers, ...accessLogImageCandidates],
-      accessLogUserIds,
-    );
   } finally {
     if (sequence === loadSequence.value) {
       loading.value = false;
@@ -724,47 +705,8 @@ async function loadDashboardSource<T>(request: Promise<T>, fallback: T, label: s
   }
 }
 
-async function loadUserImages(items: HidAccessRecord[], forceUserIds = new Set<number>()) {
-  if (!selectedReaderId.value) return;
-
-  await Promise.all(items.map(async (identity) => {
-    const hidUserId = toHidNumericId(identity.hidUserId);
-    const key = String(hidUserId || "");
-    if (
-      !hidUserId ||
-      key in userImages.value ||
-      (!forceUserIds.has(hidUserId) && !hasHidImageHint(identity))
-    ) return;
-
-    try {
-      const response = await getUserImage(selectedReaderId.value, hidUserId);
-      const image = response?.data || response;
-      userImages.value[key] = image?.base64
-        ? `data:${image.contentType || "image/jpeg"};base64,${image.base64}`
-        : "";
-    } catch {
-      userImages.value[key] = "";
-    }
-  }));
-}
 
-function getAccessLogUserIds(items: HidAccessRecord[]) {
-  return new Set(
-    items
-      .map((item) => toHidNumericId(item.user_id ?? item.userId ?? item.hidUserId))
-      .filter((userId): userId is number => userId !== undefined),
-  );
-}
 
-function hasHidImageHint(identity: HidAccessRecord) {
-  return Boolean(
-    identity?.metadata?.imageTimestamp ||
-      identity?.metadata?.facialData ||
-      identity?.imageTimestamp ||
-      identity?.image_timestamp ||
-      identity?.facialData,
-  );
-}
 
 async function onTabChange(tab: AccessTab) {
   if (tab) {
@@ -783,7 +725,6 @@ function resetDashboardData() {
   visitorRecords.value = {};
   logs.value = [];
   liveAccessLogs.value = [];
-  userImages.value = {};
   administratorUserIds.value = new Set();
   serverPages.value = 1;
   serverPageRange.value = "";
@@ -1128,7 +1069,6 @@ function mapAccessLogToRow(rawLog: HidAccessRecord, event: HidAccessRecord, inde
     name: getRawLogName(rawLog, event, identity),
     hidUserId: formatHidUid(rawLog.user_id ?? rawLog.userId ?? rawLog.hidUserId ?? identity?.hidUserId),
     facialData: identity ? getFacialData(identity) : "N/A",
-    faceImage: logHidUserId ? userImages.value[String(logHidUserId)] || "" : "",
     unit: identity ? getUnit(identity) : "N/A",
     method: getAccessMethod(identity || {}, { ...event, payload: { ...event.payload, rawAccessLog: rawLog } }),
     lastAccessTime: formatDate(rawAccessTime),
@@ -1773,10 +1713,6 @@ function escapeHtml(value: unknown) {
   border-radius: 0;
 }
 
-.hid-face-avatar {
-  border: 1px solid var(--border);
-  background: var(--hover);
-}
 
 .hid-log-name {
   align-items: center;

package/components/HidReaderUserRoster.vue

@@ -56,16 +56,10 @@
         <span class="app-cell--num">{{ item.registration || "N/A" }}</span>
       </template>
 
+      <!-- Client requirement (2026-08-26): the face photo is not shown once
+           registration is complete. Enrollment STATE only. -->
       <template #[`item.facialData`]="{ item }">
-        <v-avatar
-          v-if="getUserImageSrc(item)"
-          size="34"
-          rounded="lg"
-          class="hid-face-avatar"
-        >
-          <v-img :src="getUserImageSrc(item)" cover />
-        </v-avatar>
-        <span v-else :class="hasFacialData(item) ? 'facial-data--available' : 'app-cell--muted'">
+        <span :class="hasFacialData(item) ? 'facial-data--available' : 'app-cell--muted'">
           <v-icon
             :icon="hasFacialData(item) ? 'mdi-face-recognition' : 'mdi-face-man-shimmer-outline'"
             size="19"
@@ -208,14 +202,12 @@ type HidReaderUser = Record<string, unknown> & {
 const {
   getReaders,
   getReaderUsers,
-  getUserImage,
   getUserPinStatus,
   setUserPin,
   deleteUserPin,
 } = useHidAmico();
 const readers = ref<HidReader[]>([]);
 const users = ref<HidReaderUser[]>([]);
-const userImages = ref<Record<string, string>>({});
 const selectedReaderId = ref("");
 const search = ref("");
 const userType = ref<"all" | "user" | "visitor">("all");
@@ -328,7 +320,6 @@ async function loadUsers() {
       ? matchingItems.slice(pageStart, pageStart + 10)
       : matchingItems;
     users.value = pageItems.map(toReaderUser);
-    await loadUserImages(users.value);
     total.value = clientFiltersUserType
       ? matchingItems.length
       : toNumber(response.total ?? data.total, users.value.length);
@@ -356,7 +347,6 @@ function goToPage(nextPage: number) {
 
 function reloadFromFirstPage() {
   page.value = 1;
-  userImages.value = {};
   loadUsers();
 }
 
@@ -364,31 +354,6 @@ function hasFacialData(user: HidReaderUser) {
   return user.metadata?.facialEnrolled === true || Boolean(toText(user.metadata?.facialData));
 }
 
-async function loadUserImages(items: HidReaderUser[]) {
-  if (!selectedReaderId.value) return;
-
-  await Promise.all(items.map(async (user) => {
-    const hidUserId = toHidNumericId(user.hidUserId);
-    const key = String(hidUserId || "");
-    if (!hidUserId || key in userImages.value) return;
-
-    try {
-      const response = toRecord(await getUserImage(selectedReaderId.value, hidUserId));
-      const image = toRecord(response.data ?? response);
-      const base64 = toText(image.base64);
-      userImages.value[key] = base64
-        ? `data:${toText(image.contentType) || "image/jpeg"};base64,${base64}`
-        : "";
-    } catch {
-      userImages.value[key] = "";
-    }
-  }));
-}
-
-function getUserImageSrc(user: HidReaderUser) {
-  const hidUserId = toHidNumericId(user.hidUserId);
-  return (hidUserId ? userImages.value[String(hidUserId)] : "") || "";
-}
 
 async function openPinDialog(user: HidReaderUser) {
   const hidUserId = toHidNumericId(user.hidUserId);
@@ -583,9 +548,6 @@ function toNumber(value: unknown, fallback: number) {
   color: var(--warning, #9a6b00);
 }
 
-.hid-face-avatar {
-  border: 1px solid var(--border-color, #e0e3e8);
-}
 
 .facial-data--available {
   align-items: center;

package/components/HidUserEnrollment.vue

@@ -85,18 +85,11 @@
         <span class="app-cell--strong">{{ getName(item) }}</span>
       </template>
 
-      <!-- The face thumbnail, unchanged. It prints whatever `getUserImageSrc`
-           already returned; this screen does not read or export a template. -->
+      <!-- Client requirement (2026-08-26): the face photo is not shown once
+           registration is complete. The column reports enrollment STATE only --
+           the reader holds the image and the biometric template, we hold neither. -->
       <template #[`item.facialData`]="{ item }">
-        <v-avatar
-          v-if="getUserImageSrc(item)"
-          size="34"
-          rounded="lg"
-          class="hid-face-avatar"
-        >
-          <v-img :src="getUserImageSrc(item)" cover />
-        </v-avatar>
-        <span v-else class="app-cell--muted">{{ getFacialData(item) }}</span>
+        <span class="app-cell--muted">{{ getFacialData(item) }}</span>
       </template>
 
       <template #[`item.hidUserId`]="{ item }">
@@ -192,6 +185,12 @@
                   <span v-if="form.photoPreview" class="photo-edit-icon">
                     <v-icon icon="mdi-pencil" size="16" />
                   </span>
+                  <template v-else-if="facialEnrolled">
+                    <!-- Enrolled, but the photo is deliberately not shown or held.
+                         Re-enrolling needs a fresh capture. -->
+                    <v-icon icon="mdi-face-recognition" size="40" />
+                    <span>Face Enrolled</span>
+                  </template>
                   <template v-else>
                     <!-- Was `color="#a4acb5"`, the same grey on both themes.
                          `.photo-button` already sets `--muted`, so it inherits. -->
@@ -207,7 +206,7 @@
                   @click="triggerCameraInput"
                 />
                 <v-list-item
-                  v-if="form.photoPreview"
+                  v-if="form.photoPreview || facialEnrolled"
                   title="Remove Photo"
                   class="text-error"
                   @click="removePhoto"
@@ -538,7 +537,6 @@ const {
   getReaders,
   getIdentities,
   getReaderUsers,
-  getUserImage,
   setUserImage,
   deleteUserImage,
   getUserCards,
@@ -617,7 +615,6 @@ type HidIdentityPayload = Record<string, unknown> & {
 
 const readers = ref<HidReader[]>([]);
 const users = ref<HidUser[]>([]);
-const userImages = ref<Record<string, string>>({});
 const administratorUserIds = ref<Set<number>>(new Set());
 const selectedReaderId = ref("");
 const search = ref("");
@@ -650,6 +647,20 @@ const photoInput = ref<HTMLInputElement | null>(null);
 const cameraDialog = ref(false);
 const selectedPhotoFile = ref<File | null>(null);
 const removePhotoRequested = ref(false);
+/**
+ * Client requirement (2026-08-26): the photo is neither shown nor kept once registration
+ * completes, so the form tracks only WHETHER this person is enrolled. Re-enrolling needs a
+ * fresh capture -- there is no stored image to re-send.
+ */
+const facialEnrolled = ref(false);
+
+function hasFacialEnrollment(user?: HidUser | null) {
+  return Boolean(
+    user?.metadata?.facialEnrolled ||
+    user?.metadata?.facialData ||
+    user?.metadata?.imageTimestamp
+  );
+}
 const removePinRequested = ref(false);
 const snackbar = reactive({
   show: false,
@@ -832,8 +843,6 @@ async function loadUsers() {
     serverPageRange.value = String(responseRecord.pageRange ?? responseData.pageRange ?? "");
     if (props.cardManagement) {
       await loadVisibleUserCards(users.value);
-    } else {
-      await loadUserImages(users.value);
     }
   } catch (error) {
     console.error("Unable to load HID reader users:", error);
@@ -850,27 +859,6 @@ async function loadUsers() {
   }
 }
 
-async function loadUserImages(items: HidUser[]) {
-  if (!selectedReaderId.value) return;
-
-  await Promise.all(
-    items.map(async (user) => {
-      const hidUserId = toHidNumericId(user.hidUserId);
-      const key = String(hidUserId || "");
-      if (!hidUserId || userImages.value[key] || user?.metadata?.photo) return;
-
-      try {
-        const response = await getUserImage(selectedReaderId.value, hidUserId);
-        const image = response?.data || response;
-        userImages.value[key] = image?.base64
-          ? `data:${image.contentType || "image/jpeg"};base64,${image.base64}`
-          : "";
-      } catch {
-        userImages.value[key] = "";
-      }
-    })
-  );
-}
 
 function resetForm() {
   form.reader = selectedReaderId.value || readers.value[0]?._id || "";
@@ -888,6 +876,7 @@ function resetForm() {
   form.photoPreview = "";
   selectedPhotoFile.value = null;
   removePhotoRequested.value = false;
+  facialEnrolled.value = false;
   form.subjectCategory = "resident";
   form.subjectId = "";
 }
@@ -944,7 +933,8 @@ async function openEdit(user: HidUser) {
   form.accessPin = "";
   pinEnrolled.value = Boolean(user.metadata?.pinEnrolled);
   removePinRequested.value = false;
-  form.photoPreview = getUserImageSrc(user);
+  form.photoPreview = "";
+  facialEnrolled.value = hasFacialEnrollment(user);
   form.subjectCategory = user.person
     ? "resident"
     : user.serviceProvider
@@ -966,12 +956,6 @@ async function openEdit(user: HidUser) {
     // Preserve the last known status if the reader is temporarily offline.
   }
 
-  if (!form.photoPreview) {
-    await loadUserImages([user]);
-    if (selectedUser.value?._rowKey === user._rowKey) {
-      form.photoPreview = getUserImageSrc(user);
-    }
-  }
 }
 
 function openView(user: HidUser) {
@@ -1017,6 +1001,7 @@ function removePhoto() {
   form.photoPreview = "";
   selectedPhotoFile.value = null;
   removePhotoRequested.value = true;
+  facialEnrolled.value = false;
 }
 
 function onPhotoChange(event: Event) {
@@ -1094,7 +1079,12 @@ async function saveUser() {
         level: form.level,
         unit: form.unit,
         unitLabel: buildUnitLabel(),
-        facialData: form.photoPreview ? form.hidUserId : "",
+        // Enrollment STATE carries forward on its own. It used to be derived from the
+        // photo loaded into the form, which now stays empty -- editing a name would have
+        // silently un-enrolled the person.
+        facialEnrolled: hasFacialEnrollment(selectedUser.value),
+        facialEnrolledAt: selectedUser.value?.metadata?.facialEnrolledAt || "",
+        facialData: selectedUser.value?.metadata?.facialData || "",
         imageTimestamp: selectedUser.value?.metadata?.imageTimestamp || "",
         facialScores: selectedUser.value?.metadata?.facialScores || {},
         pinEnrolled: pinEnrolled.value,
@@ -1145,6 +1135,11 @@ async function saveUser() {
     showToast(getHidErrorMessage(error), "error");
   } finally {
     saving.value = false;
+    // Discard the captured image on every path. On a part-way failure this is what stops
+    // the photo lingering in the open form after a retry or a cancel.
+    form.photoPreview = "";
+    selectedPhotoFile.value = null;
+    removePhotoRequested.value = false;
   }
 }
 
@@ -1185,13 +1180,11 @@ async function syncFacialImage(
       }
     );
     const result = response?.data;
-    userImages.value[String(hidUserId)] = form.photoPreview;
     return { action: "enrolled", timestamp, scores: result?.scores };
   }
 
   if (removePhotoRequested.value) {
     await deleteUserImage(readerId, hidUserId);
-    delete userImages.value[String(hidUserId)];
     return { action: "removed" };
   }
 
@@ -1203,12 +1196,15 @@ function applyFacialResult(
   result: FacialSyncResult
 ) {
   if (result.action === "enrolled") {
+    metadata.facialEnrolled = true;
+    metadata.facialEnrolledAt = new Date().toISOString();
     metadata.facialData = form.hidUserId;
     metadata.imageTimestamp = String(result.timestamp || "");
     metadata.facialScores = result.scores || {};
   } else if (result.action === "removed") {
+    metadata.facialEnrolled = false;
+    metadata.facialEnrolledAt = "";
     metadata.facialData = "";
-    metadata.photo = "";
     metadata.imageTimestamp = "";
     metadata.facialScores = {};
   }
@@ -1675,16 +1671,7 @@ function getFacialData(user: HidUser) {
   return (
     user?.metadata?.facialData ||
     user?.metadata?.imageTimestamp ||
-    (user?.metadata?.photo ? user.hidUserId : "N/A")
-  );
-}
-
-function getUserImageSrc(user: HidUser) {
-  const hidUserId = toHidNumericId(user?.hidUserId);
-  return (
-    user?.metadata?.photo ||
-    (hidUserId ? userImages.value[String(hidUserId)] : "") ||
-    ""
+    (user?.metadata?.facialEnrolled ? user.hidUserId : "N/A")
   );
 }
 
@@ -2016,10 +2003,6 @@ function toHidCard(value: unknown): HidCard {
   box-shadow: var(--shadow-menu);
 }
 
-.hid-face-avatar {
-  border: 1px solid var(--border);
-  background: var(--hover);
-}
 
 .admin-rule-indicator {
   display: inline-flex;

package/composables/useHidAmico.ts

@@ -299,11 +299,6 @@ export default function useHidAmico() {
     });
   }
 
-  function getUserImage(readerId: string, hidUserId: string | number) {
-    return useNuxtApp().$api<HidApiRecord>(`${basePath}/readers/${readerId}/users/${hidUserId}/image`, {
-      method: "GET",
-    });
-  }
 
   function setUserImage(
     readerId: string,
@@ -525,7 +520,6 @@ export default function useHidAmico() {
     getReaderConfiguration,
     setReaderConfiguration,
     getLogs,
-    getUserImage,
     setUserImage,
     deleteUserImage,
     getUserCards,

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.251",
+  "version": "4.1.3-staging.253",
   "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");
+}