@7365admin1/layer-common 3.2.0 → 3.2.1-staging.59

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

@@ -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 --";
   }

package/composables/useHidAmico.ts

@@ -28,6 +28,46 @@ type HidIdentityPayload = {
   metadata?: Record<string, any>;
 };
 
+type HidVisitorQrData = {
+  visitorId: string;
+  readerId: string;
+  hidUserId: number;
+  qrValue: string;
+  qrFormat: "0" | "1" | "2";
+  issuedAt: string;
+  expiresAt: string;
+};
+
+type HidVisitorQrResponse = HidVisitorQrData | { data: HidVisitorQrData };
+
+type HidPermissionListResponse = {
+  items: THidPermissionCandidate[];
+  page: number;
+  pages: number;
+  pageRange: string;
+  limit: number;
+};
+
+type HidFacialEnrollmentResult = {
+  user_id?: number;
+  success?: boolean;
+  scores?: Record<string, unknown>;
+  errors?: Array<{ code?: number; message?: string }>;
+};
+
+export type HidSipAccountData = {
+  orgId: string;
+  site: string;
+  userId: string;
+  extension: string;
+  username: string;
+  password: string;
+  sipAddress: string;
+  websocketUrl: string;
+  status: "active";
+  provisionedAt: string;
+};
+
 export default function useHidAmico() {
   const basePath = "/api/access-management/hid";
 
@@ -78,6 +118,16 @@ export default function useHidAmico() {
     });
   }
 
+  function issueVisitorQr(
+    readerId: string,
+    payload: { visitorId: string; validityMinutes: number; qrFormat: "0" | "1" | "2" },
+  ) {
+    return useNuxtApp().$api<HidVisitorQrResponse>(`${basePath}/readers/${readerId}/visitor-qr`, {
+      method: "POST",
+      body: payload,
+    });
+  }
+
   function getReaderConfiguration(readerId: string, payload: Record<string, string[]> = {}) {
     return useNuxtApp().$api<Record<string, any>>(`${basePath}/readers/${readerId}/configuration`, {
       method: "POST",
@@ -112,6 +162,33 @@ export default function useHidAmico() {
     });
   }
 
+  function setUserImage(
+    readerId: string,
+    hidUserId: string | number,
+    image: Blob,
+    options: { timestamp?: number; match?: boolean } = {},
+  ) {
+    return useNuxtApp().$api<{ data: HidFacialEnrollmentResult }>(
+      `${basePath}/readers/${readerId}/users/${hidUserId}/image`,
+      {
+        method: "PUT",
+        query: {
+          ...(options.timestamp ? { timestamp: options.timestamp } : {}),
+          match: options.match ?? true,
+        },
+        headers: { "Content-Type": "application/octet-stream" },
+        body: image,
+      },
+    );
+  }
+
+  function deleteUserImage(readerId: string, hidUserId: string | number) {
+    return useNuxtApp().$api<Record<string, unknown>>(
+      `${basePath}/readers/${readerId}/users/${hidUserId}/image`,
+      { method: "DELETE" },
+    );
+  }
+
   function createIdentity(readerId: string, payload: HidIdentityPayload) {
     return useNuxtApp().$api<Record<string, any>>(`${basePath}/readers/${readerId}/identities`, {
       method: "POST",
@@ -151,6 +228,49 @@ export default function useHidAmico() {
     });
   }
 
+  function getSitePermissions(siteId: string, orgId: string, readerId: string) {
+    return useNuxtApp().$api<{ data: THidSitePermissions }>(
+      `${basePath}/sites/${siteId}/permissions`,
+      { method: "GET", query: { orgId, readerId } },
+    );
+  }
+
+  function ensureSipAccount(siteId: string, orgId: string) {
+    return useNuxtApp().$api<{ data: HidSipAccountData }>(
+      `${basePath}/sites/${siteId}/intercom/sip-account`,
+      { method: "POST", body: { orgId } },
+    );
+  }
+
+  function getPermissionCandidates(
+    siteId: string,
+    query: {
+      orgId: string;
+      readerId: string;
+      category: THidPermissionCategory | "intercom";
+      search?: string;
+      page?: number;
+      limit?: number;
+    },
+  ) {
+    return useNuxtApp().$api<HidPermissionListResponse>(
+      `${basePath}/sites/${siteId}/permission-candidates`,
+      { method: "GET", query },
+    );
+  }
+
+  function updateSitePermissions(
+    siteId: string,
+    orgId: string,
+    readerId: string,
+    assignments: Array<Pick<THidPermissionAssignment, "subjectId" | "category" | "intercom">>,
+  ) {
+    return useNuxtApp().$api<{ data: THidSitePermissions; message: string }>(
+      `${basePath}/sites/${siteId}/permissions`,
+      { method: "PUT", body: { orgId, readerId, assignments } },
+    );
+  }
+
   return {
     getReaders,
     createReader,
@@ -159,10 +279,13 @@ export default function useHidAmico() {
     testReader,
     syncReader,
     runObjectOperation,
+    issueVisitorQr,
     getReaderConfiguration,
     setReaderConfiguration,
     getLogs,
     getUserImage,
+    setUserImage,
+    deleteUserImage,
     getIdentities,
     createIdentity,
     updateIdentity,
@@ -170,5 +293,9 @@ export default function useHidAmico() {
     getIntercomStatus,
     makeIntercomCall,
     finalizeIntercomCall,
+    ensureSipAccount,
+    getSitePermissions,
+    getPermissionCandidates,
+    updateSitePermissions,
   };
 }

package/composables/useHidNavigation.ts

@@ -41,13 +41,6 @@ export default function useHidNavigation() {
             params: { org, site },
           },
         },
-        {
-          title: "Identity Mapping",
-          route: {
-            name: "org-site-access-mgmt-identity-mapping",
-            params: { org, site },
-          },
-        },
         {
           title: "Access Logs",
           route: {

package/composables/useOnlineFormPages.ts

@@ -20,6 +20,8 @@ export type FormBlock =
   | { type: "checkbox-group"; title?: string; single?: boolean; items: CheckboxItemDef[] }
   | { type: "paragraph"; text: string }
   | { type: "section-header"; text: string }
+  | { type: "ordered-list"; title?: string; items: string[] }
+  | { type: "unordered-list"; title?: string; items: string[] }
   | { type: "divider" }
   | { type: "signature-row"; label: string; key: string }
   | { type: "acknowledgement"; text: string }