@7365admin1/layer-common 4.0.4-staging.241 → 4.0.4-staging.242

package/components/VisitorManagement.vue

@@ -457,6 +457,15 @@
         >
           {{ item?.overnightParking?.status }}
         </v-card>
+        <v-card
+          v-else-if="activeTab === 'guests' && item?.status"
+          size="small"
+          class="rounded-xl text-capitalize text-center elevation-0 py-1 px-2"
+          :color="getVisitorStatusColor(item.status)"
+          style="max-width: 150px; margin: auto"
+        >
+          {{ getVisitorStatusLabel(item.status) }}
+        </v-card>
         <span v-else> N/A </span>
       </template>
 
@@ -536,6 +545,27 @@
             <v-divider />
           </v-card>
         </v-menu>
+        <v-menu v-else-if="activeTab === 'guests' && item?.status === 'pending' && canUpdateVisitor">
+          <template #activator="{ props }">
+            <v-avatar v-bind="props" class="rounded-xl border-md">
+              <v-icon icon="mdi-dots-vertical" />
+            </v-avatar>
+          </template>
+
+          <v-card>
+            <v-list-item @click.stop="openApproveRejectVisitorDialog(item, 'approved')">
+              <template #title>
+                <span class="text-caption">Approve</span>
+              </template>
+            </v-list-item>
+            <v-divider />
+            <v-list-item @click.stop="openApproveRejectVisitorDialog(item, 'rejected')">
+              <template #title>
+                <span class="text-caption">Reject</span>
+              </template>
+            </v-list-item>
+          </v-card>
+        </v-menu>
       </template>
 
       <template v-slot:item.checkInRemarks="{ item }">
@@ -1179,6 +1209,78 @@
       </v-card>
     </v-dialog>
 
+    <v-dialog
+      v-model="dialog.approveRejectVisitorDialog"
+      transition="dialog-bottom-transition"
+      persistent
+      width="60vh"
+    >
+      <v-card>
+        <v-toolbar density="compact">
+          <v-row
+            no-gutters
+            class="d-flex fill-height justify-space-between align-center px-4"
+          >
+            <span class="font-weight-bold">{{ approveRejectVisitorDialogTitle }}</span>
+            <v-btn
+              icon="mdi-close"
+              variant="text"
+              @click="closeApproveRejectVisitorDialog"
+            />
+          </v-row>
+        </v-toolbar>
+        <v-card-text class="px-4 pb-6">
+          <v-row no-gutters justify="center" align-content="center">
+            <v-col cols="12" class="text-h6 text-center">
+              {{
+                `Are you sure you want to ${approveRejectVisitorDialog.text} the ${approveRejectVisitorDialogTitle}?`
+              }}
+            </v-col>
+
+            <v-col cols="12" md="8" class="mt-4">
+              <v-textarea
+                v-model="visitorApproveRejectRemarks"
+                label="Remarks"
+                placeholder="Enter remarks"
+                outlined
+                rows="3"
+                clearable
+              />
+            </v-col>
+          </v-row>
+        </v-card-text>
+        <v-toolbar class="pa-0" density="compact">
+          <v-row no-gutters>
+            <v-col cols="6">
+              <v-btn
+                text="No"
+                color="grey-lighten-3"
+                variant="flat"
+                height="48"
+                tile
+                block
+                :disabled="isApprovingRejectingVisitor"
+                @click="closeApproveRejectVisitorDialog"
+              />
+            </v-col>
+            <v-col cols="6">
+              <v-btn
+                text="Yes"
+                color="success"
+                variant="flat"
+                height="48"
+                tile
+                block
+                :disabled="!visitorApproveRejectRemarks || isApprovingRejectingVisitor"
+                @click="updateVisitorApprovalStatus"
+                :loading="isApprovingRejectingVisitor"
+              />
+            </v-col>
+          </v-row>
+        </v-toolbar>
+      </v-card>
+    </v-dialog>
+
     <v-dialog v-model="hidQrDialog" max-width="440" persistent>
       <v-card>
         <v-toolbar color="transparent" density="comfortable" class="px-2">
@@ -1436,6 +1538,7 @@ const dialog = reactive({
   showVisitorDataFromScannedQRCode: false,
   approveRejectOvernightParkingRequestDialog: false,
   returnNfcCard: false,
+  approveRejectVisitorDialog: false,
 });
 
 const snapshotImageUrl = ref("");
@@ -1488,6 +1591,18 @@ const headers = computed(() => {
     list.push({ title: "Action", value: "action" });
   }
 
+  // Guests is the only non-overnight-parking tab whose rows carry a
+  // top-level status (approved/pending/rejected) and an Approve/Reject
+  // action - without these two, the item.status/item.action template slots
+  // have no header to render against and v-data-table never shows them,
+  // no matter what their own v-if says.
+  if (tab === "guests") {
+    list.push(
+      { title: "Status", value: "status" },
+      { title: "Action", value: "action" },
+    );
+  }
+
   return list;
 });
 
@@ -1590,6 +1705,77 @@ function closeApproveRejectOvernightParkingDialog() {
   overNightParkingRequestApproveRejectRemarks.value = "";
 }
 
+/** Self-service submissions arrive with `status: "pending"` when the site's
+    Self-Service Auto-Approvals toggle is off - Approve/Reject here is what
+    actually decides the visitor's outcome, mirroring the Overnight Parking
+    approve/reject pattern above but against the top-level visitor status
+    (via the existing staff update endpoint) rather than a nested field. */
+function getVisitorStatusColor(status: string) {
+  switch (status) {
+    case "approved":
+      return "success";
+    case "rejected":
+      return "error";
+    case "pending":
+      return "warning";
+    default:
+      return "grey";
+  }
+}
+
+function getVisitorStatusLabel(status: string) {
+  return status === "pending" ? "Pending Approval" : status;
+}
+
+const selectedVisitorForApproval = ref<Record<string, any>>({});
+const visitorApproveRejectRemarks = ref("");
+const approveRejectVisitorDialog = ref({ text: "", status: "" });
+const isApprovingRejectingVisitor = ref(false);
+
+const approveRejectVisitorDialogTitle = computed(() => {
+  const type = selectedVisitorForApproval.value?.type as string | undefined;
+  const label = type ? type.replace("-", " ") : "Visitor";
+  return `${label.charAt(0).toUpperCase()}${label.slice(1)} Registration Request`;
+});
+
+function openApproveRejectVisitorDialog(visitor: Record<string, any>, status: "approved" | "rejected") {
+  selectedVisitorForApproval.value = visitor;
+  approveRejectVisitorDialog.value = {
+    text: status === "approved" ? "Approve" : "Reject",
+    status,
+  };
+  visitorApproveRejectRemarks.value = "";
+  dialog.approveRejectVisitorDialog = true;
+}
+
+function closeApproveRejectVisitorDialog() {
+  dialog.approveRejectVisitorDialog = false;
+  selectedVisitorForApproval.value = {};
+  approveRejectVisitorDialog.value = { text: "", status: "" };
+  visitorApproveRejectRemarks.value = "";
+}
+
+async function updateVisitorApprovalStatus() {
+  isApprovingRejectingVisitor.value = true;
+  try {
+    await updateVisitor(selectedVisitorForApproval.value._id, {
+      status: approveRejectVisitorDialog.value.status,
+      remarks: visitorApproveRejectRemarks.value,
+      updatedBy: currentUser.value?._id,
+    } as any);
+    showMessage(
+      `Visitor registration successfully ${approveRejectVisitorDialog.value.status}`,
+      "success"
+    );
+    await getVisitorRefresh();
+    closeApproveRejectVisitorDialog();
+  } catch (error) {
+    showMessage(errorConverter(error), "error");
+  } finally {
+    isApprovingRejectingVisitor.value = false;
+  }
+}
+
 function mappedAttachments(attachments: string[]) {
   return attachments.map((x, index) => {
     return {
@@ -1665,17 +1851,12 @@ function toRoute(tab: any) {
 
   const obj = tabOptions.value.find((x) => x.value === tab);
   if (!obj) return;
+  // Don't call getVisitorRefresh() here - activeTab is already in the
+  // useLazyAsyncData `watch` array below, so changing it (which already
+  // happened via v-model before this handler runs) already triggers a
+  // refetch on its own. Calling refresh() again here fired the same
+  // request a second time on every tab click.
   page.value = 1;
-  getVisitorRefresh();
-  // navigateTo({
-  //   name: routeName,
-  //   params: {
-  //     org: orgId,
-  //   },
-  //   // query: {
-  //   //   tab
-  //   // },
-  // });
 }
 const {
   data: getVisitorReq,
@@ -1702,8 +1883,15 @@ const {
     };
 
     if (activeTab.value === "guests") {
-      params.type = "guest";
-      params.status = "approved";
+      // Self-service Contractor submissions land here too, not just Visitor
+      // (type: "guest") - the "Registered" tab hard-filters status="registered",
+      // which a pending/approved self-service contractor never has, so without
+      // this it had no tab that would ever show it.
+      params.type = "guest,contractor";
+      // A self-service submission awaiting Approve/Reject (Self-Service
+      // Auto-Approvals off) lands here as "pending" alongside already
+      // "approved" guests, rather than being hidden until someone acts on it.
+      params.status = "approved,pending";
     } else if (activeTab.value === "resident-transactions") {
       params.status = "registered";
       params.type = "resident,tenant";
@@ -2237,8 +2425,11 @@ function buildReportParams(): any {
   };
 
   if (activeTab.value === "guests") {
-    params.type = "guest";
-    params.status = "approved";
+    // Kept in sync with the Guests tab's own list query above - otherwise a
+    // report generated from this tab would silently omit contractors and
+    // pending rows the screen is actually showing.
+    params.type = "guest,contractor";
+    params.status = "approved,pending";
   } else if (activeTab.value === "resident-transactions") {
     params.status = "registered";
     params.type = "resident,tenant";

package/composables/useContactPicker.ts

@@ -0,0 +1,36 @@
+/**
+ * Wraps the browser's Contact Picker API ("or select contact in your phone
+ * book" on the self-service onboarding form). Support is narrow - Android
+ * Chrome/Edge over HTTPS only, not iOS Safari or desktop - so `isSupported`
+ * must gate whether the UI even offers this, rather than showing a button
+ * that silently does nothing everywhere else.
+ */
+export default function useContactPicker() {
+  const isSupported = computed(() => {
+    return (
+      typeof navigator !== "undefined" &&
+      "contacts" in navigator &&
+      "ContactsManager" in window
+    );
+  });
+
+  async function pickContact(): Promise<{ name?: string; tel?: string } | null> {
+    if (!isSupported.value) return null;
+    try {
+      const props = ["name", "tel"];
+      const contacts = await (navigator as any).contacts.select(props, { multiple: false });
+      const contact = contacts?.[0];
+      if (!contact) return null;
+      return {
+        name: contact.name?.[0],
+        tel: contact.tel?.[0],
+      };
+    } catch {
+      // User cancelled the picker, or the browser refused - either way this
+      // is not an error worth surfacing, the visitor can just type instead.
+      return null;
+    }
+  }
+
+  return { isSupported, pickContact };
+}

package/composables/usePublicVisitorOnboarding.ts

@@ -0,0 +1,73 @@
+/**
+ * Public, unauthenticated calls for the self-service visitor onboarding page
+ * (reached by scanning the gate QR code printed from Site Settings > Entry
+ * Pass > Self-Service). Every endpoint here is deliberately a separate,
+ * narrower public route from its staff-facing equivalent in `useBuilding`/
+ * `useVisitor`/`useSiteEntryPassSettings` - see the server-side route
+ * comments for why each one is safe to leave unauthenticated.
+ */
+export default function usePublicVisitorOnboarding() {
+  function getOnboardingSettings(siteId: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/access-management/settings/${siteId}/onboarding`,
+      { method: "GET" },
+    );
+  }
+
+  function getBlocks(siteId: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/buildings/list/site/resident/${siteId}`,
+      { method: "GET" },
+    );
+  }
+
+  function getLevels(siteId: string, blockId: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/building-levels/list/site/resident/${siteId}`,
+      { method: "GET", query: { block: blockId } },
+    );
+  }
+
+  function getUnits(siteId: string, block: string, level: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/building-units/resident/site/${siteId}/block/${block}/level/${level}`,
+      { method: "GET" },
+    );
+  }
+
+  function createVisitor(siteId: string, payload: Record<string, any>) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/visitor-transactions/self-service/${siteId}`,
+      { method: "POST", body: payload },
+    );
+  }
+
+  // The "2" collection is the one actually populated/used by
+  // OvernightParkingAvailability.vue - the un-suffixed v1 collection this
+  // used to read from is a separate, unpopulated legacy store.
+  function getOvernightParkingHours(siteId: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/overnight-parking-approval-settings2/site/${siteId}/public`,
+      { method: "GET" },
+    );
+  }
+
+  // Backs the visitor's own preview/QR page, linked from their registration
+  // email so it still works after they've closed the browser.
+  function getSelfServicePreview(id: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/visitor-transactions/self-service/preview/${id}`,
+      { method: "GET" },
+    );
+  }
+
+  return {
+    getOnboardingSettings,
+    getBlocks,
+    getLevels,
+    getUnits,
+    createVisitor,
+    getOvernightParkingHours,
+    getSelfServicePreview,
+  };
+}

package/composables/useWebUsb.ts

@@ -227,6 +227,7 @@ export default function useWebUsb() {
     address?: string,
     qrHeader?: string,
     qrSubText?: string,
+    layout?: "receipt" | "onboarding",
   ) => {
     if (!isWebUsbSupported.value) {
       throw new Error("Web USB is not supported in this browser");
@@ -245,7 +246,9 @@ export default function useWebUsb() {
       };
 
       let printTestResult;
-      if (forQr && urlImage) {
+      if (forQr && urlImage && layout === "onboarding") {
+        printTestResult = await printOnboardingQrCode(device, urlImage, qrHeader, qrSubText);
+      } else if (forQr && urlImage) {
         printTestResult = await printQrCode(
           device,
           urlImage,
@@ -399,6 +402,66 @@ export default function useWebUsb() {
     return canvas;
   }
 
+  /**
+   * The self-service onboarding QR: one large QR code, a "SCAN QR CODE"-style
+   * subtext, and a dark site-name banner along the bottom - a single-purpose
+   * gate sign, not the multi-copy visitor-pass receipt `createReceiptLayout`
+   * produces (that one prints several QRs to be cut apart and handed out).
+   */
+  async function createOnboardingQrLayout(
+    qrUrlImage: string,
+    header?: string,
+    subText?: string,
+  ): Promise<HTMLCanvasElement> {
+    const canvas = document.createElement("canvas");
+    canvas.width = 576;
+    canvas.height = 760;
+    const ctx = canvas.getContext("2d")!;
+    ctx.fillStyle = "#fff";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    ctx.textAlign = "center";
+
+    const qrSize = 400;
+    const qrCanvas = await QRCode.toCanvas(qrUrlImage, { width: qrSize, margin: 1 });
+    ctx.drawImage(qrCanvas, (canvas.width - qrSize) / 2, 40, qrSize, qrSize);
+
+    ctx.fillStyle = "#000";
+    ctx.font = "bold 26px Arial";
+    ctx.fillText((subText || "SCAN QR CODE").toUpperCase(), canvas.width / 2, 480);
+
+    const bannerHeight = 110;
+    const bannerY = canvas.height - bannerHeight;
+    ctx.fillStyle = "#000";
+    ctx.fillRect(0, bannerY, canvas.width, bannerHeight);
+    ctx.fillStyle = "#fff";
+    ctx.font = "bold 34px Arial";
+    ctx.fillText((header || "").toUpperCase(), canvas.width / 2, bannerY + bannerHeight / 2 + 12);
+
+    return canvas;
+  }
+
+  const printOnboardingQrCode = async (
+    device: USBDevice,
+    urlImage: string,
+    header?: string,
+    subText?: string,
+  ) => {
+    try {
+      const { endpointNumber } = getPrinterConnection(device);
+      const canvas = await createOnboardingQrLayout(urlImage, header, subText);
+      const rasterData = canvasToRaster(canvas);
+      await device.transferOut(endpointNumber, rasterData.buffer);
+
+      const CUT = new Uint8Array([0x1d, 0x56, 0x41, 0x10]);
+      await device.transferOut(endpointNumber, CUT.buffer);
+
+      return { success: true, message: "Onboarding QR print sent successfully" };
+    } catch (error: unknown) {
+      console.error("[WebUSB] printOnboardingQrCode error:", error);
+      return { success: false, error: getErrorMessage(error, "Unable to print onboarding QR code") };
+    }
+  };
+
   function canvasToRaster(canvas: HTMLCanvasElement): Uint8Array {
     const ctx = canvas.getContext("2d");
     if (!ctx) throw new Error("Canvas 2D context not available");

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.0.4-staging.241",
+  "version": "4.0.4-staging.242",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",