@7365admin1/layer-common 4.144.0 → 4.147.0

package/components/NricScanDialog.vue

@@ -0,0 +1,512 @@
+<!--
+  NRIC SCAN - the web side of the security mobile app's (isecure365) NRIC
+  "Scan" beside every visitor NRIC field.
+
+  The camera is pointed at the visitor's NRIC card. About once a second the
+  card frame is grabbed and its text read IN THE BROWSER (tesseract.js) by
+  `utils/nric-card.ts` - the app's own reader, ported as is.
+
+  Nothing is filled in by itself (the app, 2026-10-20). As soon as a number is
+  read, the scan pauses on "Check the details": the NRIC and the name exactly
+  as they will be filled in, with "Fill In" and "Scan Again", so the guard
+  compares them with the card and a wrong name never slips through.
+   - A number whose check letter matches is shown at once; if its name has not
+     been read yet, 3 reads of the same number are tried for it first.
+   - A number whose check letter does NOT match (a worn card, a specimen with a
+     dummy number), or an M-series FIN, must be read the same twice in a row,
+     so a one-off misread is never offered; the panel then warns about it.
+
+  Nothing is uploaded or kept: each frame lives on a canvas only while it is
+  read. (The reading engine and its English data are fetched once by the
+  browser from the tesseract.js CDN.)
+-->
+<template>
+  <v-dialog :model-value="modelValue" max-width="640" persistent
+    @update:model-value="emit('update:modelValue', $event)">
+    <v-card class="nric-scan screen-modal">
+      <v-card-title class="d-flex align-center justify-space-between">
+        <span>Scan NRIC</span>
+        <v-btn icon="mdi-close" variant="text" aria-label="Close NRIC scan"
+          @click="cancel" />
+      </v-card-title>
+
+      <v-card-text class="screen-modal__body">
+        <div class="nric-scan__viewport">
+          <video ref="videoElement" class="nric-scan__preview" autoplay muted playsinline />
+
+          <div v-if="!starting && !cameraError" class="nric-scan__frame-area">
+            <div class="nric-scan__frame" :style="{ width: `${FRAME_WIDTH * 100}%` }" />
+          </div>
+
+          <!-- Paused on what was read: exactly what "Fill In" fills in. -->
+          <div v-if="found" class="nric-scan__panel-backdrop">
+            <div class="nric-scan__panel" data-test="nric-scan-check">
+              <div class="nric-scan__panel-title">Check the details</div>
+              <div class="nric-scan__panel-row">
+                <span class="nric-scan__panel-label">NRIC</span>
+                <span class="nric-scan__panel-value">{{ found.nric }}</span>
+              </div>
+              <div class="nric-scan__panel-row">
+                <span class="nric-scan__panel-label">Name</span>
+                <span v-if="found.name" class="nric-scan__panel-value">{{ found.name }}</span>
+                <span v-else class="nric-scan__panel-missing">Not read. Type it in the form.</span>
+              </div>
+              <p v-if="!found.checkLetterOk" class="nric-scan__panel-warning">
+                The check letter does not match this number. Check it carefully.
+              </p>
+              <p class="nric-scan__panel-help">
+                Compare them with the card. If anything is wrong, scan again.
+              </p>
+              <div class="nric-scan__panel-actions">
+                <v-btn class="text-none screen-btn-primary" variant="flat" @click="scanAgain">Scan Again</v-btn>
+                <v-btn class="text-none screen-btn-primary" variant="flat" @click="fillIn">Fill In</v-btn>
+              </div>
+            </div>
+          </div>
+
+          <div v-if="starting" class="nric-scan__state">
+            <v-progress-circular indeterminate color="primary" />
+            <span class="mt-3">Starting camera...</span>
+          </div>
+
+          <div v-else-if="cameraError" class="nric-scan__state px-6 text-center">
+            <v-icon icon="mdi-camera-off-outline" size="42" color="error" />
+            <span class="mt-3 text-error">{{ cameraError }}</span>
+          </div>
+        </div>
+
+        <canvas ref="canvasElement" class="d-none" />
+
+        <!-- Hidden while paused on the details: the panel says what to do. -->
+        <div v-if="!found" class="nric-scan__hint text-center" data-test="nric-scan-hint">
+          {{ hint }}
+        </div>
+      </v-card-text>
+
+      <div class="screen-modal__footer">
+        <v-btn class="text-none screen-btn-ghost" variant="flat" @click="cancel">Cancel</v-btn>
+      </div>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import {
+  findUncheckedNric,
+  isNricChecksumValid,
+  readNricCard,
+  type CardLine,
+} from "../utils/nric-card";
+
+type NricScanResult = { nric: string; name: string | null };
+
+const props = defineProps<{ modelValue: boolean }>();
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+  read: [result: NricScanResult];
+}>();
+
+/** Reads of the same number tried for its name before the panel shows without one. */
+const NAME_WAIT_READS = 3;
+/** An NRIC is ID-1 size: 85.6 x 54 mm. */
+const CARD_RATIO = 85.6 / 54;
+/** The card frame's share of the picture's width. */
+const FRAME_WIDTH = 0.85;
+/** Width the frame is read at: text recognition wants the letters large. */
+const READ_WIDTH = 1600;
+/** Pause after a failed read, so a fault does not spin the camera. */
+const RETRY_DELAY_MS = 500;
+/** About once a second, as the app photographs the card. */
+const READ_INTERVAL_MS = 1000;
+
+const videoElement = ref<HTMLVideoElement | null>(null);
+const canvasElement = ref<HTMLCanvasElement | null>(null);
+const stream = shallowRef<MediaStream | null>(null);
+const starting = ref(false);
+const cameraError = ref("");
+const preparing = ref(false);
+const foundNumber = ref(false);
+
+/** What the scan read, shown for the guard to check before "Fill In". */
+type FoundCard = NricScanResult & {
+  /** False when the check letter does not match the number. */
+  checkLetterOk: boolean;
+};
+// The scan pauses on it until the guard fills it in or scans again.
+const found = ref<FoundCard | null>(null);
+
+const hint = computed(() => {
+  if (cameraError.value) return "You can close this and type the NRIC.";
+  if (preparing.value) return "Preparing the scanner...";
+  return foundNumber.value
+    ? "NRIC found. Reading the name..."
+    : "Hold the front of the NRIC inside the frame.";
+});
+
+let worker: any = null;
+let session = 0;
+
+function wait(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+function stopCamera() {
+  stream.value?.getTracks().forEach((track) => track.stop());
+  stream.value = null;
+  if (videoElement.value) videoElement.value.srcObject = null;
+}
+
+async function stopWorker() {
+  const current = worker;
+  worker = null;
+  try {
+    await current?.terminate?.();
+  } catch {
+    // Already gone.
+  }
+}
+
+function getCameraErrorMessage(caught: unknown) {
+  if (caught instanceof DOMException) {
+    if (caught.name === "NotAllowedError") {
+      return "Camera access is needed to scan the NRIC. Allow camera access and try again.";
+    }
+    if (caught.name === "NotFoundError") return "No camera was found on this device.";
+    if (caught.name === "NotReadableError") {
+      return "The camera is currently being used by another application.";
+    }
+  }
+  return "Unable to open the camera. Use HTTPS or check the browser camera permission.";
+}
+
+async function startCamera(): Promise<boolean> {
+  stopCamera();
+  cameraError.value = "";
+  starting.value = true;
+  try {
+    if (!navigator.mediaDevices?.getUserMedia) throw new Error("Camera API is unavailable");
+    // The back camera on a tablet / phone; a laptop simply has the one.
+    stream.value = await navigator.mediaDevices.getUserMedia({
+      audio: false,
+      video: {
+        facingMode: { ideal: "environment" },
+        width: { ideal: 1920 },
+        height: { ideal: 1080 },
+      },
+    });
+    await nextTick();
+    if (!videoElement.value) throw new Error("Camera preview is unavailable");
+    videoElement.value.srcObject = stream.value;
+    await videoElement.value.play();
+    return true;
+  } catch (caught: unknown) {
+    stopCamera();
+    cameraError.value = getCameraErrorMessage(caught);
+    return false;
+  } finally {
+    starting.value = false;
+  }
+}
+
+async function getWorker() {
+  if (worker) return worker;
+  const { createWorker } = await import("tesseract.js");
+  worker = await createWorker("eng");
+  return worker;
+}
+
+/** The card frame of the current picture, enlarged, in grey. */
+function grabFrame(): HTMLCanvasElement | null {
+  const video = videoElement.value;
+  const canvas = canvasElement.value;
+  if (!video || !canvas || !video.videoWidth || !video.videoHeight) return null;
+
+  const vw = video.videoWidth;
+  const vh = video.videoHeight;
+  const fw = Math.round(vw * FRAME_WIDTH);
+  const fh = Math.round(Math.min(fw / CARD_RATIO, vh));
+  const sx = Math.round((vw - fw) / 2);
+  const sy = Math.round((vh - fh) / 2);
+
+  const scale = Math.max(1, READ_WIDTH / fw);
+  canvas.width = Math.round(fw * scale);
+  canvas.height = Math.round(fh * scale);
+  const context = canvas.getContext("2d", { willReadFrequently: true });
+  if (!context) return null;
+  context.filter = "grayscale(1) contrast(1.2)";
+  context.drawImage(video, sx, sy, fw, fh, 0, 0, canvas.width, canvas.height);
+  return canvas;
+}
+
+type OcrLine = { text?: string; bbox?: { x0: number; y0: number; x1: number; y1: number } };
+
+/** tesseract.js lines as the reader's CardLine (v5 `lines`, v6 `blocks`). */
+function toCardLines(data: any): CardLine[] {
+  let lines: OcrLine[] = Array.isArray(data?.lines) ? data.lines : [];
+  if (!lines.length && Array.isArray(data?.blocks)) {
+    lines = data.blocks.flatMap((block: any) =>
+      (block?.paragraphs ?? []).flatMap((paragraph: any) => paragraph?.lines ?? [])
+    );
+  }
+  return lines
+    .filter((line) => line?.text && line.bbox)
+    .map((line) => ({
+      text: String(line.text).trim(),
+      x: line.bbox!.x0,
+      y: line.bbox!.y0,
+      width: line.bbox!.x1 - line.bbox!.x0,
+      height: line.bbox!.y1 - line.bbox!.y0,
+    }))
+    .filter((line) => line.text.length > 0);
+}
+
+async function readLoop(id: number) {
+  // The number read on the previous frame (an unchecked number must be read
+  // the same twice in a row).
+  let previousNumber: string | null = null;
+  // The number being held while its name is looked for, and that name.
+  let held: FoundCard | null = null;
+  let heldReads = 0;
+
+  preparing.value = true;
+  let recognizer: any;
+  try {
+    recognizer = await getWorker();
+  } catch {
+    if (id === session) cameraError.value = "The NRIC scanner could not be loaded. Please type the NRIC.";
+    return;
+  } finally {
+    preparing.value = false;
+  }
+
+  while (id === session && !found.value) {
+    const started = Date.now();
+    try {
+      const frame = grabFrame();
+      if (!frame) {
+        await wait(RETRY_DELAY_MS);
+        continue;
+      }
+      const { data } = await recognizer.recognize(frame, {}, { blocks: true });
+      if (id !== session) break;
+
+      const lines = toCardLines(data);
+      const read = readNricCard(lines);
+      // A number whose check letter matches (or an M-series FIN), else one
+      // with the right shape whose check letter does not.
+      const number = read.nric ?? findUncheckedNric(lines);
+      if (!number) {
+        previousNumber = null;
+      } else {
+        const check = isNricChecksumValid(number);
+        const sure = check === true || number === previousNumber;
+        previousNumber = number;
+        if (sure) {
+          foundNumber.value = true;
+          // Same number again: keep a name an earlier frame caught.
+          const previous: FoundCard | null = held;
+          const same = previous !== null && previous.nric === number;
+          const current: FoundCard = {
+            nric: number,
+            name: read.name ?? (same ? previous!.name : null),
+            checkLetterOk: check !== false,
+          };
+          held = current;
+          heldReads = same ? heldReads + 1 : 1;
+          if (current.name || heldReads >= NAME_WAIT_READS) {
+            found.value = current;
+            break;
+          }
+        }
+      }
+    } catch {
+      // A frame grabbed while the camera closes, or an unreadable one.
+      await wait(RETRY_DELAY_MS);
+    }
+    const left = READ_INTERVAL_MS - (Date.now() - started);
+    if (left > 0) await wait(left);
+  }
+}
+
+function reset() {
+  session += 1;
+  foundNumber.value = false;
+  found.value = null;
+  stopCamera();
+}
+
+/** "Fill In": exactly what the panel showed. */
+function fillIn() {
+  const chosen = found.value;
+  if (!chosen) return;
+  reset();
+  emit("read", { nric: chosen.nric, name: chosen.name });
+  emit("update:modelValue", false);
+}
+
+/** "Scan Again": the camera is still running; read afresh. */
+function scanAgain() {
+  found.value = null;
+  foundNumber.value = false;
+  if (stream.value) void readLoop(session);
+}
+
+function cancel() {
+  reset();
+  emit("update:modelValue", false);
+}
+
+watch(
+  () => props.modelValue,
+  async (isOpen) => {
+    if (!isOpen) {
+      reset();
+      return;
+    }
+    reset();
+    const id = session;
+    if (await startCamera()) {
+      if (id === session) void readLoop(id);
+    }
+  }
+);
+
+onBeforeUnmount(() => {
+  reset();
+  void stopWorker();
+});
+</script>
+
+<style scoped>
+.nric-scan {
+  overflow: hidden;
+}
+
+.nric-scan__viewport {
+  position: relative;
+  width: 100%;
+  min-height: 240px;
+  overflow: hidden;
+  border-radius: var(--r-inner);
+  /* The stage a video sits on: dark in both themes, as the facial photo
+     camera's, so the preview does not flash white on light. */
+  background: #111722;
+}
+
+/* Natural size, not `cover`: the frame drawn here is the part that is read. */
+.nric-scan__preview {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.nric-scan__frame-area {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.nric-scan__frame {
+  aspect-ratio: 85.6 / 54;
+  max-height: 100%;
+  border: 3px solid #ffffff;
+  border-radius: 12px;
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35);
+}
+
+/* The details panel sits over the paused picture. Its own colours, not the
+   theme's surface: it is drawn on the dark camera stage in both themes. */
+.nric-scan__panel-backdrop {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  background: rgba(0, 0, 0, 0.55);
+}
+
+.nric-scan__panel {
+  width: 100%;
+  max-width: 420px;
+  max-height: 100%;
+  overflow-y: auto;
+  padding: 16px;
+  border-radius: 12px;
+  background: #ffffff;
+  color: #111722;
+}
+
+.nric-scan__panel-title {
+  font-size: 16px;
+  font-weight: 800;
+  margin-bottom: 10px;
+}
+
+.nric-scan__panel-row {
+  display: grid;
+  grid-template-columns: 64px minmax(0, 1fr);
+  gap: 8px;
+  padding: 6px 0;
+  border-bottom: 1px solid rgba(17, 23, 34, 0.12);
+}
+
+.nric-scan__panel-label {
+  font-size: 13px;
+  color: #5b6372;
+}
+
+.nric-scan__panel-value {
+  font-size: 15px;
+  font-weight: 700;
+  word-break: break-word;
+}
+
+.nric-scan__panel-missing {
+  font-size: 13px;
+  font-style: italic;
+  color: #5b6372;
+}
+
+.nric-scan__panel-warning {
+  margin: 10px 0 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: #b42318;
+}
+
+.nric-scan__panel-help {
+  margin: 8px 0 0;
+  font-size: 13px;
+  color: #5b6372;
+}
+
+.nric-scan__panel-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 14px;
+}
+
+.nric-scan__state {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: #111722;
+  color: #ffffff;
+}
+
+.nric-scan__hint {
+  margin-top: 12px;
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  font-weight: 500;
+  color: var(--muted);
+}
+</style>

package/components/PassInformation.vue

@@ -15,7 +15,7 @@
           v-model:search="passInput"
           :hide-no-data="false"
           class="mt-3 filter-field"
-          :items="passItems"
+          :items="passItemsOffered"
           :rules="props.passRules"
           item-title="prefixAndName"
           item-value="_id"
@@ -113,6 +113,8 @@ type PassInformationProps = {
   clearable?: boolean;
   pass?: TPassKeyPayload[];
   keys?: TPassKeyPayload[];
+  /** Passes picked elsewhere on the form (a contractor member's): not offered. */
+  excludeIds?: string[];
 };
 
 const props = withDefaults(defineProps<PassInformationProps>(), {
@@ -124,6 +126,7 @@ const props = withDefaults(defineProps<PassInformationProps>(), {
   clearable: false,
   pass: [],
   keys: [],
+  excludeIds: () => [],
 });
 
 const emit = defineEmits(["update:pass", "update:keys"]);
@@ -148,6 +151,12 @@ const scannedValue = ref("");
 
 const { getPassKeysByPageSearch } = usePassKey();
 
+const passItemsOffered = computed(() =>
+  (passItems.value ?? []).filter(
+    (item) => !props.excludeIds.includes(item._id ?? "") || item._id === selectedPass.value
+  )
+);
+
 const typeItems = [
   {
     label: "QR Pass",
@@ -281,7 +290,7 @@ watch(scannedValue, async (newValue) => {
     await fetchKeys();
   }
 
-  const matchedPass = passItems.value.find((item) => {
+  const matchedPass = passItemsOffered.value.find((item) => {
     return getItemLabel(item).toLowerCase() === scanned.toLowerCase();
   });
 

package/components/RolePermissionMain.vue

@@ -68,6 +68,8 @@
           -->
           <!-- "Admin · St. Regis Residences": names are unique per site (2026-10-01) -->
           <template #item.name="{ item }">{{ roleLabel(item) }}</template>
+          <!-- "App" column: plain app name, not the stored code (security_agency) -->
+          <template #item.type="{ item }">{{ roleAppLabel(item.type) }}</template>
           <template #item.scope="{ item }">
             <StatusChip
               :dot="false"
@@ -214,7 +216,7 @@
 
 <script setup lang="ts">
 // Relative import: this layer's `utils/` is not auto-imported into consumers.
-import { roleLabel, safeReturnTo, showSiteField, sitePickerRoleLabel } from "../utils/role";
+import { roleAppLabel, roleLabel, safeReturnTo, showSiteField, sitePickerRoleLabel } from "../utils/role";
 import { holdsPermission } from "../utils/permission-spellings";
 import { countRealPermissions } from "../utils/security-catalogue";
 import {

package/components/ScheduleTaskForm.vue

@@ -1,8 +1,8 @@
 <!--
-  ADD / EDIT AN EXTRA VISIT - four short steps: What, Where, When, Who is told.
+  ADD / EDIT AN EXTRA CHECK - four short steps: What, Where, When, Who is told.
 
   The last step shows one sentence saying exactly what will be created
-  ("Adds 1 extra visit to 3 areas (24 units) at 08:00 every weekday ... next:
+  ("Adds 1 extra check to 3 areas (24 units) at 08:00 every weekday ... next:
   Wed 21 Oct"). The form checks what the server checks (utils/schedule-task.ts)
   so a schedule that would never run is caught before saving; whatever the
   server still refuses is shown in its own words.
@@ -11,7 +11,7 @@
   <v-dialog v-model="show" max-width="760" persistent scrollable>
     <v-card class="screen-modal">
       <v-card-title class="d-flex align-center">
-        {{ props.mode === "edit" ? "Edit Extra Visit" : "Add Extra Visit" }}
+        {{ props.mode === "edit" ? "Edit Extra Check" : "Add Extra Check" }}
         <v-spacer />
         <v-btn
           icon="mdi-close"
@@ -49,7 +49,7 @@
             <v-stepper-window-item :value="1">
               <div class="st-step">
                 <p class="st-step__help">
-                  Give the extra visit a name staff will recognise, and say
+                  Give the extra check a name staff will recognise, and say
                   what they should do.
                 </p>
                 <InputLabel for="title" title="Title" required />
@@ -61,7 +61,7 @@
                   class="filter-field mb-4"
                   placeholder="For example: Lunch toilet check"
                   :error-messages="fieldError('title')"
-                  hint="Staff see this name on their phone, on the extra round."
+                  hint="Staff see this name on their phone and on the Daily Checklist."
                   persistent-hint
                   hide-details="auto"
                 />
@@ -73,7 +73,7 @@
                   density="comfortable"
                   class="filter-field"
                   rows="3"
-                  placeholder="Optional. Anything staff should know for this visit."
+                  placeholder="Optional. Anything staff should know for this check."
                   hint="Optional. For example: refill soap and tissue as well."
                   persistent-hint
                   hide-details="auto"
@@ -85,9 +85,8 @@
             <v-stepper-window-item :value="2">
               <div class="st-step">
                 <p class="st-step__help">
-                  Pick the areas that get the extra visit. Every unit in a
-                  picked area gets one more tick box on the Daily Checklist
-                  for this visit.
+                  Pick the areas to check. Every unit in a picked area gets
+                  one more tick box on the Daily Checklist for this check.
                 </p>
                 <InputLabel for="selected-areas" title="Areas" required />
                 <v-select
@@ -170,7 +169,7 @@
               <div class="st-step">
                 <p class="st-step__help">
                   Choose the time, and whether it happens once or repeats.
-                  Times are Singapore time. The extra round appears on staff's
+                  Times are Singapore time. The check appears on staff's
                   checklist at this time.
                 </p>
                 <v-row dense>
@@ -305,8 +304,8 @@
                   class="mb-4"
                   title="Who is told"
                 >
-                  Staff on this site get a push notification when the extra
-                  visit is added to their checklist.
+                  Staff of this site who use the mobile app get a phone
+                  notification when the check is added to their checklist.
                 </v-alert>
 
                 <div class="st-summary">
@@ -321,7 +320,7 @@
                 <div class="st-preview">
                   <div class="st-preview__head">
                     <v-icon size="18" class="mr-1">mdi-clock-outline</v-icon>
-                    {{ previewTime }} · Extra visit
+                    {{ previewTime }} · Extra check
                   </div>
                   <div class="st-preview__title">
                     {{ subject.trim() || "(your title)" }}
@@ -391,7 +390,7 @@
           :loading="submitting"
           @click="submitTask"
         >
-          {{ props.mode === "edit" ? "Save Changes" : "Add Extra Visit" }}
+          {{ props.mode === "edit" ? "Save Changes" : "Add Extra Check" }}
         </v-btn>
       </v-card-actions>
     </v-card>
@@ -667,7 +666,7 @@ const loadTaskData = async () => {
   } catch (error: any) {
     if ((props.taskData as any)?.title) setFormFromTask(props.taskData);
     showMessage(
-      error?.data?.message || "Could not load this extra visit.",
+      error?.data?.message || "Could not load this extra check.",
       "error",
     );
   } finally {
@@ -719,7 +718,7 @@ const submitTask = async () => {
 
     showMessage(
       response?.message ||
-        `Extra visit ${props.mode === "edit" ? "updated" : "added"}.`,
+        `Extra check ${props.mode === "edit" ? "saved" : "added"}.`,
       "success",
     );
 
@@ -729,7 +728,7 @@ const submitTask = async () => {
   } catch (error: any) {
     // The server's own plain-English message (permission, validation, ...).
     serverError.value =
-      error?.data?.message || "Could not save this extra visit. Please try again.";
+      error?.data?.message || "Could not save this extra check. Please try again.";
     showMessage(serverError.value, "error");
   } finally {
     submitting.value = false;