@7365admin1/layer-common 4.97.1-staging.587 → 4.97.1-staging.589

package/components/Nfc/NFCPatrolReportMain.vue

@@ -100,6 +100,7 @@ import {
   reportFileName,
   type CsvSection,
 } from "../../utils/report-export";
+import { reportYear } from "../../utils/nfc-patrol-report";
 
 import PatrolReportTab from "./PatrolReport/PatrolReportTab.vue";
 import DailyReportTab from "./PatrolReport/DailyReportTab.vue";
@@ -137,6 +138,7 @@ function updateFilters(value: NFCPatrolReportFilters) {
   filters.route = value.route;
   filters.timeRange = value.timeRange;
   filters.date = value.date;
+  filters.year = value.year;
 }
 
 const { exportReportPdf } = useReportPdf();
@@ -147,10 +149,10 @@ function reportMeta(report: HTMLElement, extension: "pdf" | "csv"): ReportPdfMet
   const route = options.value.routes.find(({ value }) => value === filters.route)?.title;
   const text = (selector: string) => report.querySelector(selector)?.textContent?.trim() || undefined;
 
-  // The yearly table always covers the current year (useNFCPatrolMonthlyReport).
+  // The yearly table covers the year picked on the Monthly Report.
   const period =
     activeTab.value === "monthly"
-      ? { label: "Year", value: String(new Date().getFullYear()) }
+      ? { label: "Year", value: reportYear(filters.year) }
       : { label: "Date", value: formatReportDate(filters.date) };
   const details = [{ label: "Route", value: route ?? "-" }, period];
   if (activeTab.value === "patrol" && filters.timeRange) {

package/components/Nfc/NFCPatrolRouteForm.vue

@@ -111,7 +111,7 @@
               {{
                 form.timed
                   ? "Patrols start at the route's start times, within the tolerance."
-                  : "No time window: this route can be patrolled at any time."
+                  : "No time window: patrol at any time of day, on the selected Days only. Use Select all for every day."
               }}
             </div>
           </v-col>

package/components/Nfc/PatrolReport/MonthlyReportTab.vue

@@ -5,6 +5,7 @@
       :options="options"
       :show-time-filter="false"
       :show-date-filter="false"
+      show-year-filter
       @update:model-value="$emit('update:filters', $event)"
       @export="(type) => $emit('export', type, csvSections())"
     />
@@ -53,7 +54,7 @@ import type {
 } from "../../../types/nfc-patrol-report";
 
 import { useNFCPatrolMonthlyReport } from "../../../composables/useNFCPatrolMonthlyReport";
-import { monthlyReportCsv } from "../../../utils/nfc-patrol-report";
+import { monthlyReportCsv, reportYear } from "../../../utils/nfc-patrol-report";
 import PatrolMonthDialog from "./PatrolMonthDialog.vue";
 import type { CsvSection } from "../../../utils/report-export";
 
@@ -84,8 +85,7 @@ const monthTitle = ref("");
 const monthRows = shallowRef<NFCPatrolReportSummaryRow[]>([]);
 
 function openMonth(monthIndex: number) {
-  // The yearly report always covers the current year (useNFCPatrolMonthlyReport).
-  monthTitle.value = `${report.value?.rows[monthIndex]?.month ?? ""} ${new Date().getFullYear()}`;
+  monthTitle.value = `${report.value?.rows[monthIndex]?.month ?? ""} ${reportYear(props.filters.year)}`;
   monthRows.value = monthRuns(monthIndex);
   monthOpen.value = true;
 }
@@ -95,7 +95,7 @@ function csvSections() {
 }
 
 watch(
-  () => [props.filters.route, props.active],
+  () => [props.filters.route, props.filters.year, props.active],
   () => {
     if (props.active) {
       void fetchReport();

package/components/Nfc/PatrolReport/ReportFilters.vue

@@ -63,6 +63,25 @@
       />
     </v-col>
 
+    <!-- Monthly Report: which year. Each month's row then opens that month. -->
+    <v-col
+      v-if="showYearFilter"
+      cols="12"
+      md="2"
+      class="px-md-2 mb-2 mb-md-0"
+    >
+      <v-select
+        :model-value="reportYear(modelValue.year)"
+        :items="reportYears()"
+        label="Year"
+        class="filter-field"
+        variant="outlined"
+        density="comfortable"
+        hide-details
+        @update:model-value="updateFilter('year', $event)"
+      />
+    </v-col>
+
     <v-spacer />
 
     <v-col cols="12" md="2" class="pl-md-2">
@@ -99,6 +118,7 @@ import type {
   NFCPatrolReportFilters,
 } from "../../../types/nfc-patrol-report";
 import ReportDatePicker from "./ReportDatePicker.vue";
+import { reportYear, reportYears } from "../../../utils/nfc-patrol-report";
 
 const props = withDefaults(
   defineProps<{
@@ -106,12 +126,14 @@ const props = withDefaults(
     options: NFCPatrolReportFilterOptions;
     showTimeFilter?: boolean;
     showDateFilter?: boolean;
+    showYearFilter?: boolean;
   }>(),
   {
     showTimeFilter: true,
     showDateFilter: true,
+    showYearFilter: false,
   },
-);;
+);
 
 const emit = defineEmits<{
   "update:modelValue": [value: NFCPatrolReportFilters];

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();
   });