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

package/components/VisitorForm.vue

@@ -496,10 +496,115 @@
         </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 v-if="hidQrVisible" :src="hidQrPreview.imageUrl" width="280" height="280" alt="Visitor access QR code" />
+            <button v-else type="button" class="hid-qr-reveal" aria-label="Show QR code" @click="hidQrVisible = true">
+              <v-icon icon="mdi-eye-outline" size="42" />
+              <span>Click to show QR code</span>
+            </button>
+          </div>
+
+          <v-btn
+            variant="text"
+            density="comfortable"
+            class="text-none"
+            :prepend-icon="hidQrVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
+            @click="hidQrVisible = !hidQrVisible"
+          >
+            {{ hidQrVisible ? "Hide QR code" : "Show QR code" }}
+          </v-btn>
+
+          <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-chip
+            v-if="hidQrPreview.expiresAt"
+            class="mt-2"
+            size="small"
+            :color="hidQrExpired ? 'error' : 'success'"
+            variant="tonal"
+          >
+            {{ hidQrExpired ? "Expired" : `Expires in ${formatHidQrCountdown(hidQrRemainingSeconds)}` }}
+          </v-chip>
+
+          <v-btn
+            v-if="hidQrExpired"
+            block
+            class="mt-4 text-none"
+            color="primary-button"
+            variant="flat"
+            prepend-icon="mdi-refresh"
+            :loading="hidQrRegenerating"
+            @click="regenerateHidQrCode"
+          >
+            Generate QR again
+          </v-btn>
+
+          <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 +616,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 +668,7 @@ const {
 const { getBySiteId: getEntryPassSettingsBySiteId } =
   useSiteEntryPassSettings();
 const { createVisitorPass, signQr } = useAccessManagement();
+const { issueVisitorQr } = useHidAmico();
 const { testConnection } = useWebUsb();
 const {
   findPersonByNRIC,
@@ -610,6 +717,38 @@ 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 hidQrVisible = ref(false);
+const hidQrRegenerating = ref(false);
+const hidQrVisitorId = ref("");
+const hidQrNow = ref(Date.now());
+let hidQrTimer: ReturnType<typeof setInterval> | null = null;
+const hidQrPendingCompletion = ref<"done" | "done:more" | null>(null);
+const hidQrPreview = reactive({
+  imageUrl: "",
+  issuedAt: "",
+  expiresAt: "",
+});
+
+const hidQrRemainingSeconds = computed(() => {
+  const expiry = new Date(hidQrPreview.expiresAt).getTime();
+  return Number.isFinite(expiry) ? Math.max(0, Math.ceil((expiry - hidQrNow.value) / 1000)) : 0;
+});
+const hidQrExpired = computed(() => Boolean(hidQrPreview.expiresAt) && hidQrRemainingSeconds.value === 0);
+
+watch(hidQrPreviewDialog, (open) => {
+  if (hidQrTimer) clearInterval(hidQrTimer);
+  hidQrTimer = null;
+  if (!open) return;
+  hidQrNow.value = Date.now();
+  hidQrTimer = setInterval(() => { hidQrNow.value = Date.now(); }, 1000);
+});
+
+onBeforeUnmount(() => {
+  if (hidQrTimer) clearInterval(hidQrTimer);
+});
 
 const registeredUnitCompanyName = ref("N/A");
 
@@ -710,7 +849,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 +876,8 @@ const hidQrValidityMinutes = computed(() => {
   return Number.isFinite(value) && value > 0 ? value : 60;
 });
 
+const hidQrReaderId = computed(() => String(hidQrCodePassConfig.value?.readerId || ""));
+
 const hidQrCodePassAllowed = computed(() => {
   return (
     hidQrCodePassEnabled.value &&
@@ -1710,7 +1852,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 +1942,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 +1978,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 +2001,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 +2068,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 +2093,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 +2123,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 +2135,81 @@ 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 {
+    hidQrVisitorId.value = visitorId;
+    const response = await issueVisitorQr(hidQrReaderId.value, {
+      visitorId,
+      validityMinutes: hidQrValidityMinutes.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 || "";
+    hidQrVisible.value = false;
+    hidQrNow.value = Date.now();
+    hidQrPreviewDialog.value = true;
+    return true;
+  } catch (error: unknown) {
+    const message = errorConverter(error) || "Unable to generate HID QR Code.";
+    if (hidQrPreviewDialog.value) hidQrPreviewError.value = message;
+    else errorMessage.value = message;
+    return false;
+  }
+}
+
+function formatHidQrCountdown(totalSeconds: number) {
+  const safe = Math.max(0, totalSeconds);
+  const hours = Math.floor(safe / 3600);
+  const minutes = Math.floor((safe % 3600) / 60);
+  const seconds = safe % 60;
+  return [hours, minutes, seconds].map((part) => String(part).padStart(2, "0")).join(":");
+}
+
+async function regenerateHidQrCode() {
+  if (!hidQrVisitorId.value) return;
+  hidQrRegenerating.value = true;
+  hidQrPreviewError.value = "";
+  try {
+    await prepareHidQrCodePreview(hidQrVisitorId.value);
+  } finally {
+    hidQrRegenerating.value = 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 +2219,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 +2228,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 +2402,30 @@ 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;
+}
+
+.hid-qr-reveal {
+  display: flex;
+  width: 280px;
+  height: 280px;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  background: #f5f7f9;
+  color: #344054;
+  cursor: pointer;
+  flex-direction: column;
+  gap: 10px;
+  font: inherit;
+}
 </style>