@7365admin1/layer-common 3.2.1 → 3.2.2-staging.77

package/components/VisitorForm.vue

@@ -496,10 +496,79 @@
         </v-card-actions>
       </v-card>
     </v-dialog>
+
+    <v-dialog v-model="hidQrPreviewDialog" max-width="440" persistent>
+      <v-card class="hid-qr-preview-card">
+        <v-toolbar color="transparent" density="comfortable" class="px-2">
+          <v-toolbar-title class="text-subtitle-1 font-weight-bold">
+            Visitor QR Code
+          </v-toolbar-title>
+          <v-btn icon="mdi-close" variant="text" title="Close" @click="closeHidQrPreview" />
+        </v-toolbar>
+
+        <v-card-text class="px-8 pb-6 text-center">
+          <div class="text-h6 font-weight-bold">
+            {{ hidQrTemplate.header || "Visitor Access Pass" }}
+          </div>
+          <div class="text-body-2 text-medium-emphasis mt-1">
+            {{ hidQrTemplate.subtext || "Scan at the HID reader for entry" }}
+          </div>
+
+          <div class="hid-qr-image-shell my-5">
+            <v-img :src="hidQrPreview.imageUrl" width="280" height="280" alt="Visitor access QR code" />
+          </div>
+
+          <div class="text-h6 font-weight-bold">{{ visitor.name }}</div>
+          <div v-if="hidQrPreview.expiresAt" class="text-caption text-medium-emphasis mt-1">
+            Valid until {{ formatHidQrExpiry(hidQrPreview.expiresAt) }}
+          </div>
+
+          <v-alert v-if="hidQrPreviewError" type="error" variant="tonal" density="compact" class="mt-4 text-left">
+            {{ hidQrPreviewError }}
+          </v-alert>
+        </v-card-text>
+
+        <v-divider />
+        <v-card-actions class="pa-0">
+          <v-btn
+            variant="text"
+            height="52"
+            class="flex-grow-1 text-none"
+            prepend-icon="mdi-download"
+            @click="downloadHidQrCode"
+          >
+            Download
+          </v-btn>
+          <v-btn
+            v-if="hasHidQrPrinterConfig"
+            variant="flat"
+            color="primary-button"
+            height="52"
+            class="flex-grow-1 text-none"
+            prepend-icon="mdi-printer"
+            :loading="hidQrPrinting"
+            @click="printHidQrCodePass"
+          >
+            Print
+          </v-btn>
+          <v-btn
+            v-else
+            variant="flat"
+            color="primary-button"
+            height="52"
+            class="flex-grow-1 text-none"
+            @click="closeHidQrPreview"
+          >
+            Close
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </v-card>
 </template>
 
 <script setup lang="ts">
+import QRCode from "qrcode";
 import { propsFactory } from "vuetify/lib/util/propsFactory.mjs";
 import useBuildingUnit from "../composables/useBuildingUnit";
 import useWebUsb from "../composables/useWebUsb";
@@ -511,6 +580,7 @@ import useVisitor from "../composables/useVisitor";
 import useSiteEntryPassSettings from "../composables/useSiteEntryPassSettings";
 import useAccessManagement from "../composables/useAccessManagement";
 import usePeople from "../composables/usePeople";
+import useHidAmico from "../composables/useHidAmico";
 
 const prop = defineProps({
   type: {
@@ -562,6 +632,7 @@ const {
 const { getBySiteId: getEntryPassSettingsBySiteId } =
   useSiteEntryPassSettings();
 const { createVisitorPass, signQr } = useAccessManagement();
+const { issueVisitorQr } = useHidAmico();
 const { testConnection } = useWebUsb();
 const {
   findPersonByNRIC,
@@ -610,6 +681,15 @@ const hidQrPrinted = ref(false);
 const isPhoneFieldFocused = ref(false);
 const isPlateNumberFieldFocused = ref(false);
 const isNricFieldFocused = ref(false);
+const hidQrPrinting = ref(false);
+const hidQrPreviewDialog = ref(false);
+const hidQrPreviewError = ref("");
+const hidQrPendingCompletion = ref<"done" | "done:more" | null>(null);
+const hidQrPreview = reactive({
+  imageUrl: "",
+  issuedAt: "",
+  expiresAt: "",
+});
 
 const registeredUnitCompanyName = ref("N/A");
 
@@ -710,7 +790,8 @@ const requireNRIC = computed(() => {
 });
 
 const hidQrCodePassConfig = computed(() => {
-  return (siteData.value as any)?.metadata?.hidQrCodePass || {};
+  const site = siteData.value as TSite | null;
+  return site?.metadata?.hidQrCodePass;
 });
 
 const hidQrCodePassEnabled = computed(() => {
@@ -736,6 +817,12 @@ const hidQrValidityMinutes = computed(() => {
   return Number.isFinite(value) && value > 0 ? value : 60;
 });
 
+const hidQrReaderId = computed(() => String(hidQrCodePassConfig.value?.readerId || ""));
+const hidQrFormat = computed<"0" | "1" | "2">(() => {
+  const value = String(hidQrCodePassConfig.value?.qrFormat || "0");
+  return value === "1" || value === "2" ? value : "0";
+});
+
 const hidQrCodePassAllowed = computed(() => {
   return (
     hidQrCodePassEnabled.value &&
@@ -1710,7 +1797,7 @@ async function submit(options: { skipNonCheckedOutCheck?: boolean } = {}) {
     return;
   }
 
-  if (passType.value === "HID_QR" && !validateHidQrPrinterConfig()) return;
+  if (passType.value === "HID_QR" && !validateHidQrReaderConfig()) return;
   if (
     prop.mode === "add" &&
     !options.skipNonCheckedOutCheck &&
@@ -1800,11 +1887,10 @@ async function submit(options: { skipNonCheckedOutCheck?: boolean } = {}) {
 
     if (res) {
       if (passType.value === "HID_QR") {
-        const printed = await printHidQrCodePass(
-          getVisitorIdFromResponse(res),
-          false
-        );
-        if (!printed) return;
+        const previewReady = await prepareHidQrCodePreview(getVisitorIdFromResponse(res));
+        if (!previewReady) return;
+        hidQrPendingCompletion.value = createMore.value ? "done:more" : "done";
+        return;
       }
 
       if (
@@ -1837,12 +1923,9 @@ async function submit(options: { skipNonCheckedOutCheck?: boolean } = {}) {
           });
 
           if (passType.value === "QR") {
-            console.log("[QR Print] passRes:", passRes);
             const accessCards: any[] =
               (passRes as any)?.data?.accessCards ?? [];
-            console.log("[QR Print] accessCards:", accessCards);
             const printer = entryPassSettings.value?.data?.settings?.printer;
-            console.log("[QR Print] printer config:", printer);
             if (!printer?.vendorId || !printer?.productId) {
               console.warn("[QR Print] Aborted: no printer configured.");
             } else if (!accessCards.length) {
@@ -1863,31 +1946,14 @@ async function submit(options: { skipNonCheckedOutCheck?: boolean } = {}) {
               const address = [blockLabel, levelLabel, unitLabel]
                 .filter(Boolean)
                 .join("/");
-              console.log(
-                "[QR Print] Printing",
-                accessCards.length,
-                "card(s). vendorId:",
-                vendorId,
-                "productId:",
-                productId,
-                "address:",
-                address
-              );
 
               await nextTick();
               for (const qrCode of accessCards) {
-                console.log("[QR Print] Signing QR for card:", qrCode._id);
                 const signed = await signQr({
                   cardId: qrCode._id,
                   purpose: "vms",
                 });
                 const qrData = signed?.data;
-                console.log(
-                  "[QR Print] signQr result:",
-                  signed,
-                  "| qrData:",
-                  qrData
-                );
                 if (!qrData) {
                   console.warn(
                     "[QR Print] Skipping card",
@@ -1947,17 +2013,23 @@ function parseUsbId(value: unknown) {
     : parseInt(text, 10);
 }
 
-function getVisitorIdFromResponse(response: any) {
+function getVisitorIdFromResponse(response: unknown) {
   if (typeof response === "string") return response;
+  if (!response || typeof response !== "object") return "";
+
+  const result = response as Record<string, unknown>;
+  const nested = result.data && typeof result.data === "object"
+    ? result.data as Record<string, unknown>
+    : {};
   return (
-    response?._id ||
-    response?.id ||
-    response?.data?._id ||
-    response?.data?.id ||
-    response?.insertedId ||
-    response?.data?.insertedId ||
+    result._id ||
+    result.id ||
+    nested._id ||
+    nested.id ||
+    result.insertedId ||
+    nested.insertedId ||
     ""
-  );
+  ).toString();
 }
 
 function getHidQrPrinterUsbIds() {
@@ -1966,7 +2038,19 @@ function getHidQrPrinterUsbIds() {
   return { vendorId, productId };
 }
 
+function validateHidQrReaderConfig() {
+  if (!hidQrReaderId.value) {
+    errorMessage.value =
+      "No HID reader is configured for QR Code Pass. Please select a reader in Settings.";
+    return false;
+  }
+
+  return true;
+}
+
 function validateHidQrPrinterConfig() {
+  if (!validateHidQrReaderConfig()) return false;
+
   if (!hasHidQrPrinterConfig.value) {
     errorMessage.value =
       "No printer is configured on HID settings. Please configure the HID QR Code printer before continuing.";
@@ -1984,42 +2068,6 @@ function validateHidQrPrinterConfig() {
   return true;
 }
 
-function buildHidQrCodePayload(visitorId = "") {
-  if (hidQrPrintPayload.value) return hidQrPrintPayload.value;
-
-  const issuedAt = new Date();
-  const expiresAt = new Date(
-    issuedAt.getTime() + hidQrValidityMinutes.value * 60 * 1000
-  );
-  const nonce =
-    typeof crypto !== "undefined" && "randomUUID" in crypto
-      ? crypto.randomUUID()
-      : `${Date.now()}-${Math.random().toString(36).slice(2)}`;
-
-  hidQrPrintPayload.value = JSON.stringify({
-    purpose: "hid-amico-visitor-access",
-    visitorId,
-    site: prop.site,
-    org: prop.org,
-    visitorType: prop.type,
-    name: visitor.name || "",
-    company: visitor.company || "",
-    contact: visitor.contact || "",
-    nric: visitor.nric || "",
-    plateNumber: visitor.plateNumber || "",
-    block: visitor.block || "",
-    level: visitor.level || "",
-    unit: visitor.unit || "",
-    unitName: visitor.unitName || "",
-    address: buildVisitorAddress(),
-    issuedAt: issuedAt.toISOString(),
-    expiresAt: expiresAt.toISOString(),
-    nonce,
-  });
-
-  return hidQrPrintPayload.value;
-}
-
 function buildVisitorAddress() {
   const blockLabel =
     blocksArray.value.find((b: any) => b.value === visitor.block)?.title || "";
@@ -2032,20 +2080,58 @@ function buildVisitorAddress() {
   return [blockLabel, levelLabel, unitLabel].filter(Boolean).join("/");
 }
 
-async function printHidQrCodePass(visitorId = "", manageProcessing = true) {
+async function prepareHidQrCodePreview(visitorId: string) {
+  hidQrPreviewError.value = "";
+  if (!visitorId) {
+    errorMessage.value = "Unable to identify the visitor for HID QR Code enrollment.";
+    return false;
+  }
+
+  try {
+    const response = await issueVisitorQr(hidQrReaderId.value, {
+      visitorId,
+      validityMinutes: hidQrValidityMinutes.value,
+      qrFormat: hidQrFormat.value,
+    });
+    const credential = "data" in response ? response.data : response;
+    hidQrPrintPayload.value = credential.qrValue;
+    if (!hidQrPrintPayload.value) {
+      errorMessage.value = "HID QR Code enrollment did not return a QR value.";
+      return false;
+    }
+
+    hidQrPreview.imageUrl = await QRCode.toDataURL(hidQrPrintPayload.value, {
+      width: 360,
+      margin: 2,
+      errorCorrectionLevel: "M",
+    });
+    hidQrPreview.issuedAt = credential.issuedAt || "";
+    hidQrPreview.expiresAt = credential.expiresAt || "";
+    hidQrPreviewDialog.value = true;
+    return true;
+  } catch (error: unknown) {
+    errorMessage.value = errorConverter(error) || "Unable to generate HID QR Code.";
+    return false;
+  }
+}
+
+async function printHidQrCodePass() {
   if (hidQrPrinted.value) return true;
 
   if (!validateHidQrPrinterConfig()) return false;
 
   const { vendorId, productId } = getHidQrPrinterUsbIds();
 
-  if (manageProcessing) processing.value = true;
+  hidQrPrinting.value = true;
+  hidQrPreviewError.value = "";
   try {
+    if (!hidQrPrintPayload.value) return false;
+
     const printResult = await testConnection(
       vendorId,
       productId,
       true,
-      buildHidQrCodePayload(visitorId),
+      hidQrPrintPayload.value,
       null,
       null,
       visitor.company || visitor.name || "",
@@ -2055,7 +2141,7 @@ async function printHidQrCodePass(visitorId = "", manageProcessing = true) {
     );
 
     if (!printResult?.success || printResult?.printTest?.success === false) {
-      errorMessage.value =
+      hidQrPreviewError.value =
         printResult?.printTest?.error ||
         printResult?.error ||
         "Unable to print HID QR Code. Please check the printer connection.";
@@ -2064,14 +2150,40 @@ async function printHidQrCodePass(visitorId = "", manageProcessing = true) {
 
     hidQrPrinted.value = true;
     return true;
-  } catch (error: any) {
-    errorMessage.value = error?.message || "Unable to print HID QR Code.";
+  } catch (error: unknown) {
+    hidQrPreviewError.value = errorConverter(error) || "Unable to print HID QR Code.";
     return false;
   } finally {
-    if (manageProcessing) processing.value = false;
+    hidQrPrinting.value = false;
   }
 }
 
+function formatHidQrExpiry(value: string) {
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? value : date.toLocaleString();
+}
+
+function downloadHidQrCode() {
+  if (!hidQrPreview.imageUrl) return;
+  const safeName = String(visitor.name || "visitor")
+    .trim()
+    .replace(/[^a-z0-9]+/gi, "-")
+    .replace(/^-|-$/g, "")
+    .toLowerCase();
+  const link = document.createElement("a");
+  link.href = hidQrPreview.imageUrl;
+  link.download = `hid-visitor-qr-${safeName || "visitor"}.png`;
+  link.click();
+}
+
+function closeHidQrPreview() {
+  hidQrPreviewDialog.value = false;
+  const completion = hidQrPendingCompletion.value;
+  hidQrPendingCompletion.value = null;
+  if (completion === "done:more") emit("done:more");
+  else if (completion === "done") emit("done");
+}
+
 watch(
   () => visitor.plateNumber,
   (newVal) => {
@@ -2212,4 +2324,15 @@ onMounted(() => {
   font-size: 0.95rem;
   opacity: 1;
 }
+
+.hid-qr-preview-card {
+  border-radius: 6px;
+}
+
+.hid-qr-image-shell {
+  display: inline-flex;
+  padding: 12px;
+  border: 1px solid #dce3e8;
+  background: #ffffff;
+}
 </style>

package/components/VisitorManagement.vue

@@ -588,7 +588,7 @@
         :org="orgId"
         :site="siteId"
         :visitor-data="selectedVisitorDataObject"
-        :current-user="currentUser._id"
+        :current-user="currentUser?._id"
         :type="activeVisitorFormType"
         :enable-unregistered="enableUnregistered"
         @back="handleClickBack"
@@ -1601,7 +1601,6 @@ const {
 watch(getVisitorReq, (newData: any) => {
   if (newData) {
     items.value = newData.items ?? [];
-    // items.value = [{ _id: "testid", name: "John Doe", type: "Contractor", company: "ABC Corp", location: "Block A, Level 1, Unit 101", contact: "12345678", plateNumber: "SGX1234A", checkIn: new Date().toISOString(), checkOut: null, status: "registered", visitorPass: [{ _id: "1", keyId: "pass1", prefixAndName: "VIP Pass" }, { _id: "2", keyId: "pass2", prefixAndName: "VIP Pass 2" }], passKeys: [{ _id: "1", keyId: "key2", prefixAndName: "Master Key" }] }];
     pages.value = newData.pages ?? 0;
     pageRange.value = newData?.pageRange ?? "-- - -- of --";
   }
@@ -1708,7 +1707,7 @@ async function handleVisitorDataFromScannedQRCodeCheckInOut(
           site: visitorData.site ?? siteId,
         },
         update: {
-          updatedBy: currentUser.value._id,
+          updatedBy: currentUser.value?._id,
           visitorPass: visitorPass.find(
             (i: Record<string, any>) => i.keyId === null
           )

package/components/VisitorSocketPopUp.vue

@@ -66,6 +66,29 @@
       </template>
     </v-snackbar>
 
+    <!--
+      Camera health is its own alert, deliberately separate from the plate
+      snackbar above: it is not a visitor event, it must not be silenced by the
+      unregistered-visitor switch, and it must not be hidden on the unregistered
+      tab. Several failing cameras collapse into one line rather than one
+      snackbar each.
+    -->
+    <v-snackbar
+      v-if="canViewVisitor"
+      v-model="cameraAlert.modal"
+      :color="cameraFaults.size ? 'warning' : 'success'"
+      :timeout="10000"
+      location="top right"
+      class="rounded-xl"
+      multi-line
+      :z-index="100000000"
+    >
+      <span class="text-1-4rem">{{ cameraAlertText }}</span>
+      <template #actions>
+        <v-btn icon="mdi-close" variant="text" @click="cameraAlert.modal = false" />
+      </template>
+    </v-snackbar>
+
     <v-dialog v-model="permanentMessageDialog.modal" max-width="480" persistent>
       <v-card>
         <v-card-title class="text-h6">Notice</v-card-title>
@@ -132,6 +155,36 @@ const permanentMessageDialog = reactive({
   text: "",
 });
 
+// Outstanding camera faults for this site, keyed by camera id so a repeat for
+// the same camera replaces its line instead of adding another.
+const cameraFaults = reactive(new Map<string, string>());
+const cameraRecovery = ref("");
+const cameraAlert = reactive({ modal: false });
+
+const cameraAlertText = computed(
+  () => cameraAlertMessage([...cameraFaults.values()]) || cameraRecovery.value
+);
+
+const handleCameraHealth = (data: TVisitorSocketData) => {
+  // Older API-core builds send the fault text with no `event`, so a bare
+  // message is a fault.
+  if (data?.event === "camera-recovered") {
+    // Without a camera id there is no way to tell which fault cleared.
+    if (data?.camera) cameraFaults.delete(data.camera);
+    else cameraFaults.clear();
+    // Alerts are now infrequent, so the operator is told it came back —
+    // otherwise the only signal a camera recovered is silence.
+    cameraRecovery.value = cameraFaults.size ? "" : data?.message || "";
+    cameraAlert.modal = Boolean(cameraAlertText.value);
+    return;
+  }
+
+  if (!data?.message) return;
+  cameraRecovery.value = "";
+  cameraFaults.set(data?.camera || data.message, data.message);
+  cameraAlert.modal = true;
+};
+
 watch(
   () => props.siteId,
   async (siteId) => {
@@ -233,8 +286,9 @@ const connectSocket = () => {
     }
 
 
-    if (data?.message) {
-      showTransientMessage(data.message, "error");
+    // Camera health, not a visitor event: its own alert, its own gate.
+    if (data?.message || data?.event) {
+      handleCameraHealth(data);
     }
 
     if (data?.messagePermanent) {

package/composables/useComment.ts

@@ -89,13 +89,13 @@ export default function useComment() {
 
       comments.value = _comments.items
         .map((comment: any) => {
-          if (comment.createdBy === currentUser.value._id) {
+          if (comment.createdBy === currentUser.value?._id) {
             comment.justify = "end";
           } else {
             comment.justify = "start";
             if (
               ((Array.isArray(comment.seenBy) &&
-                !comment.seenBy.includes(currentUser.value._id)) ||
+                !comment.seenBy.includes(currentUser.value?._id)) ||
                 !comment?.seenBy) &&
               comment?._id
             ) {
@@ -111,7 +111,7 @@ export default function useComment() {
         );
 
       if (Array.isArray(updateSeenIds) && updateSeenIds.length > 0) {
-        const seenBy = await updateSeenBy(updateSeenIds, currentUser.value._id);
+        const seenBy = await updateSeenBy(updateSeenIds, currentUser.value?._id);
       }
     } catch (error) {
       console.log("error :", error);