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

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @iservice365/layer-common
 
+## 4.1.0
+
+### Minor Changes
+
+- a45deb4: Add a canonical permission catalogue and a test that fails when the UI and the server stop agreeing
+
+  `constants/permissions.ts` exports the canonical spelling of every permission the estate uses, typed so a misspelt string is a build error rather than a check that is silently false forever, plus a map from each legacy spelling (four for work orders, two each for visitors, bulletin boards, buildings and service providers) to its canonical form.
+
+  Additive only: no gate is rewired and no existing check changes the string it asks for. `test/permission-vocabulary.test.mjs` fails when a new string appears in this package, or when the server's enforced set — snapshotted in `test/fixtures/server-permissions.json` by `tools/refresh-server-permissions.mjs` — contains something the catalogue has no name for.
+
 ## 4.0.3
 
 ### Patch Changes
@@ -280,11 +290,11 @@
   `utils/console-tier.ts` + `composables/useConsoleTier.ts` mirror the server's
   own rule from two endpoints the console already calls, unprojected:
 
-        GET /api/members/user/:user/app/admin    the Seven365 staff membership
-        GET /api/roles/id/:role                  that membership's role document
+          GET /api/members/user/:user/app/admin    the Seven365 staff membership
+          GET /api/roles/id/:role                  that membership's role document
 
-        owner  = member.type === "admin" && role.type === "admin" && role.default === true
-        staff  = member.type === "admin" && role.type === "admin"
+          owner  = member.type === "admin" && role.type === "admin" && role.default === true
+          staff  = member.type === "admin" && role.type === "admin"
 
   `role.default` is the marker because it is the only property of a platform
   staff role no API caller can set - `role.controller.ts` validates create and

package/components/EntryPass/SelfServiceQrPreview.vue

@@ -0,0 +1,79 @@
+<template>
+  <v-dialog
+    :model-value="modelValue"
+    transition="dialog-right-transition"
+    width="420"
+    persistent
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <v-card class="screen-modal">
+      <div class="d-flex justify-end pa-2">
+        <v-btn
+          variant="text"
+          icon="mdi-close"
+          class="screen-modal__close"
+          aria-label="Close preview"
+          @click="emit('update:modelValue', false)"
+        ></v-btn>
+      </div>
+
+      <v-card-text class="screen-modal__body pa-0 pb-4">
+        <!-- Matches the printed A5 layout: one QR, a "scan" subtext, and a
+             dark banner carrying the site name - not the multi-copy receipt
+             `EntryPassQrTemplatePreview` renders for physical passes. -->
+        <div class="onboarding-qr-preview mx-6">
+          <img v-if="qrImage" :src="qrImage" width="240" height="240" class="d-block mx-auto" />
+          <p class="onboarding-qr-preview__subtext text-center mt-4">
+            {{ (subText || "SCAN QR CODE").toUpperCase() }}
+          </p>
+        </div>
+        <div class="onboarding-qr-preview__banner text-center mt-4 py-4">
+          {{ (header || "").toUpperCase() }}
+        </div>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts" setup>
+import QRCode from "qrcode";
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  header: { type: String, default: "" },
+  subText: { type: String, default: "" },
+  qrValue: { type: String, default: "" },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const qrImage = ref<string>("");
+
+async function renderQr() {
+  if (!props.qrValue) {
+    qrImage.value = "";
+    return;
+  }
+  qrImage.value = await QRCode.toDataURL(props.qrValue, { width: 240, margin: 1 });
+}
+
+watch(() => props.qrValue, renderQr);
+onMounted(renderQr);
+</script>
+
+<style scoped>
+.onboarding-qr-preview__subtext {
+  font-size: var(--fs-card-title);
+  font-weight: var(--fw-card-title);
+  color: var(--text);
+  letter-spacing: 0.5px;
+}
+
+.onboarding-qr-preview__banner {
+  background: #000;
+  color: #fff;
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: 2px;
+}
+</style>

package/components/EntryPassMain.vue

@@ -391,6 +391,157 @@
 
           </v-row>
         </v-window-item>
+
+        <!-- ─── Tab 5: Self-Service ───────────────────────────── -->
+        <v-window-item value="onboarding">
+          <v-row no-gutters class="px-6 pt-4">
+
+            <!-- Self-Service Auto-Approvals -->
+            <v-col cols="12">
+              <div class="d-flex mt-3 pb-5 pr-5">
+                <p class="mr-6 font-weight-medium flex-grow-1">
+                  Self-Service Auto-Approvals
+                  <span class="d-block text-caption screen-hint mt-1">
+                    Automatically issue active passes the moment a contractor or
+                    visitor submits their registration form via the self-service
+                    web portal.
+                  </span>
+                </p>
+                <v-switch
+                  color="success"
+                  hide-details
+                  v-model="currentEntryPassSettings.onboardingEnabled"
+                  @update:modelValue="updateOnboardingEnabled()"
+                />
+              </div>
+            </v-col>
+
+            <v-divider />
+
+            <!-- Printer Setup -->
+            <v-col cols="12">
+              <div class="mt-5 pb-5">
+                <p class="font-weight-medium mb-3">Printer Setup</p>
+                <v-row align="center">
+                  <v-col cols="12" md="3">
+                    <v-text-field
+                      label="Vendor ID"
+                      hide-details
+                      clearable
+                      v-model="currentEntryPassSettings.onboardingPrinterVendorId"
+                    />
+                  </v-col>
+                  <v-col cols="12" md="3">
+                    <v-text-field
+                      label="Product ID"
+                      hide-details
+                      clearable
+                      v-model="currentEntryPassSettings.onboardingPrinterProductId"
+                    />
+                  </v-col>
+                  <v-col cols="12" md="3" class="d-flex align-end">
+                    <v-btn
+                      color="primary"
+                      variant="outlined"
+                      prepend-icon="mdi-magnify"
+                      block
+                      height="48"
+                      :loading="scanningOnboardingPrinter"
+                      @click="scanOnboardingPrinter()"
+                    >
+                      Scan Printer
+                    </v-btn>
+                  </v-col>
+                  <v-col cols="12" md="3" class="d-flex align-end pr-0">
+                    <v-btn
+                      color="success"
+                      variant="outlined"
+                      prepend-icon="mdi-printer-check"
+                      block
+                      height="48"
+                      :loading="testingOnboardingPrinter"
+                      @click="testAndPrintOnboarding()"
+                    >
+                      Test & Print
+                    </v-btn>
+                  </v-col>
+                </v-row>
+                <v-row class="mt-4">
+                  <v-col cols="12" md="3">
+                    <v-btn
+                      color="primary"
+                      variant="flat"
+                      prepend-icon="mdi-content-save"
+                      block
+                      @click="saveOnboardingSettings()"
+                    >
+                      Save Settings
+                    </v-btn>
+                  </v-col>
+                </v-row>
+              </div>
+            </v-col>
+
+            <v-divider />
+
+            <!-- Self-Service Pass QR Code -->
+            <v-col cols="12">
+              <div class="mt-5 pb-5">
+                <p class="font-weight-medium mb-3">Self-Service Pass QR Code</p>
+                <v-row no-gutters>
+                  <v-col cols="12" md="6" class="pr-md-2">
+                    <v-text-field
+                      label="Header"
+                      placeholder="Enter QR code header"
+                      hide-details
+                      density="comfortable"
+                      clearable
+                      v-model="currentEntryPassSettings.onboardingHeader"
+                    />
+                  </v-col>
+                  <v-col cols="12" md="6" class="pl-md-2 mt-3 mt-md-0">
+                    <v-text-field
+                      label="Subtext"
+                      placeholder="Enter QR code subtext"
+                      hide-details
+                      density="comfortable"
+                      clearable
+                      v-model="currentEntryPassSettings.onboardingSubText"
+                    />
+                  </v-col>
+                  <v-col cols="12">
+                    <v-row class="mt-3">
+                      <v-col cols="12" md="4">
+                        <v-btn
+                          color="success"
+                          variant="flat"
+                          prepend-icon="mdi-eye"
+                          block
+                          @click="isShowOnboardingPreview = true"
+                        >
+                          Preview
+                        </v-btn>
+                      </v-col>
+                      <v-col cols="12" md="4">
+                        <v-btn
+                          color="primary"
+                          variant="flat"
+                          prepend-icon="mdi-printer"
+                          block
+                          :loading="printingOnboardingQr"
+                          @click="printOnboardingQrCode()"
+                        >
+                          Print QR Code
+                        </v-btn>
+                      </v-col>
+                    </v-row>
+                  </v-col>
+                </v-row>
+              </div>
+            </v-col>
+
+          </v-row>
+        </v-window-item>
       </v-window>
     </AppCard>
 
@@ -401,6 +552,13 @@
       :header="currentEntryPassSettings.qrCodeTemplateHeader"
       :sub-text="currentEntryPassSettings.qrCodeTemplateHeaderSubText"
     />
+
+    <EntryPassSelfServiceQrPreview
+      v-model="isShowOnboardingPreview"
+      :header="currentEntryPassSettings.onboardingHeader"
+      :sub-text="currentEntryPassSettings.onboardingSubText"
+      :qr-value="onboardingQrValue"
+    />
   </div>
 </template>
 
@@ -420,6 +578,7 @@ const entryPassTabs = [
   { value: "qrcode", label: "QR Code", icon: "mdi-qrcode" },
   { value: "printer", label: "Printer", icon: "mdi-printer" },
   { value: "entrypass", label: "Entrypass", icon: "mdi-link-variant" },
+  { value: "onboarding", label: "Self-Service", icon: "mdi-account-multiple-check-outline" },
 ];
 
 const currentEntryPassSettings = ref<Record<string, any>>({
@@ -445,6 +604,11 @@ const currentEntryPassSettings = ref<Record<string, any>>({
   disclaimerMessage: "",
   url: "",
   template: { id: "", name: "" },
+  onboardingEnabled: false,
+  onboardingHeader: "",
+  onboardingSubText: "",
+  onboardingPrinterVendorId: "",
+  onboardingPrinterProductId: "",
   status: "",
   createdBy: "",
   updatedBy: "",
@@ -474,6 +638,18 @@ const isShowTemplatePreview = ref(false);
 const uploadingTemplate = ref(false);
 const templateFileInput = ref<HTMLInputElement | null>(null);
 
+const scanningOnboardingPrinter = ref(false);
+const testingOnboardingPrinter = ref(false);
+const printingOnboardingQr = ref(false);
+const isShowOnboardingPreview = ref(false);
+
+/** The URL printed on the self-service QR code — the public, unauthenticated
+    page a walk-up visitor lands on after scanning it at the gate. */
+const runtimeConfig = useRuntimeConfig().public as Record<string, any>;
+const onboardingQrValue = computed(
+  () => `${runtimeConfig.APP_PROPERTY_MANAGEMENT}/public-view/visitor-onboarding/${siteId}`
+);
+
 function triggerTemplateUpload() {
   templateFileInput.value?.click();
 }
@@ -614,6 +790,15 @@ watchEffect(() => {
       disclaimerMessage: data.settings?.disclaimerMessage ?? "",
       url: data.settings?.url ?? "",
       template: data.settings?.template ?? { id: "", name: "" },
+      onboardingEnabled: data.settings?.onboarding?.enabled ?? false,
+      onboardingHeader: data.settings?.onboarding?.header ?? "",
+      onboardingSubText: data.settings?.onboarding?.subText ?? "",
+      onboardingPrinterVendorId: data.settings?.onboarding?.printer?.vendorId
+        ? String(data.settings.onboarding.printer.vendorId)
+        : "",
+      onboardingPrinterProductId: data.settings?.onboarding?.printer?.productId
+        ? String(data.settings.onboarding.printer.productId)
+        : "",
       createdAt: data.createdAt ?? "",
       updatedAt: data.updatedAt ?? "",
     };
@@ -651,6 +836,15 @@ function buildPayload() {
       template: currentEntryPassSettings.value.template?.id
         ? currentEntryPassSettings.value.template
         : null,
+      onboarding: {
+        enabled: currentEntryPassSettings.value.onboardingEnabled ?? false,
+        header: currentEntryPassSettings.value.onboardingHeader || "",
+        subText: currentEntryPassSettings.value.onboardingSubText || "",
+        printer: {
+          vendorId: Number(currentEntryPassSettings.value.onboardingPrinterVendorId) || null,
+          productId: Number(currentEntryPassSettings.value.onboardingPrinterProductId) || null,
+        },
+      },
     },
   };
 }
@@ -693,6 +887,101 @@ async function saveEntryPassUrl() {
   getSiteEntryPassSettings();
 }
 
+async function updateOnboardingEnabled() {
+  await _save(buildPayload());
+  showMessage("Self-service auto-approval updated!", "success");
+  getSiteEntryPassSettings();
+}
+
+async function scanOnboardingPrinter() {
+  if (!isWebUsbSupported.value) {
+    showMessage("Web USB is not supported in this browser", "error");
+    return;
+  }
+  try {
+    scanningOnboardingPrinter.value = true;
+    const device = await requestDevice();
+    currentEntryPassSettings.value.onboardingPrinterVendorId = String(device.vendorId);
+    currentEntryPassSettings.value.onboardingPrinterProductId = String(device.productId);
+    showMessage(
+      `Printer found: ${device.productName} (${device.vendorId}:${device.productId})`,
+      "success",
+    );
+  } catch (error: any) {
+    if (error.message !== "No device selected") {
+      showMessage(error.message || "Failed to scan printer", "error");
+    }
+  } finally {
+    scanningOnboardingPrinter.value = false;
+  }
+}
+
+async function testAndPrintOnboarding() {
+  if (!isWebUsbSupported.value) {
+    showMessage("Web USB is not supported in this browser", "error");
+    return;
+  }
+  const vendorId = Number(currentEntryPassSettings.value.onboardingPrinterVendorId);
+  const productId = Number(currentEntryPassSettings.value.onboardingPrinterProductId);
+  if (!vendorId || !productId) {
+    showMessage("Please set a valid Vendor ID and Product ID first", "warning");
+    return;
+  }
+  try {
+    testingOnboardingPrinter.value = true;
+    const result = await testConnection(vendorId, productId);
+    showMessage(result.message, result.success ? "success" : "error");
+  } catch (error: any) {
+    showMessage(error.message || "Test print failed", "error");
+  } finally {
+    testingOnboardingPrinter.value = false;
+  }
+}
+
+async function saveOnboardingSettings() {
+  await _save(buildPayload());
+  showMessage("Self-service settings saved successfully!", "success");
+  getSiteEntryPassSettings();
+}
+
+async function printOnboardingQrCode() {
+  if (!isWebUsbSupported.value) {
+    showMessage("Web USB is not supported in this browser", "error");
+    return;
+  }
+  const vendorId = Number(currentEntryPassSettings.value.onboardingPrinterVendorId);
+  const productId = Number(currentEntryPassSettings.value.onboardingPrinterProductId);
+  if (!vendorId || !productId) {
+    showMessage("Please set up and save a printer first", "warning");
+    return;
+  }
+  try {
+    printingOnboardingQr.value = true;
+    // Header/subtext are printed onto the physical QR, so persist them
+    // before sending to the printer - otherwise a printed pass could show
+    // text the settings screen never actually saved.
+    await _save(buildPayload());
+    const result = await testConnection(
+      vendorId,
+      productId,
+      true,
+      onboardingQrValue.value,
+      null,
+      null,
+      undefined,
+      undefined,
+      currentEntryPassSettings.value.onboardingHeader,
+      currentEntryPassSettings.value.onboardingSubText,
+      "onboarding",
+    );
+    showMessage(result.message, result.success ? "success" : "error");
+  } catch (error: any) {
+    showMessage(error.message || "Failed to print QR code", "error");
+  } finally {
+    printingOnboardingQr.value = false;
+  }
+}
+
 function showMessage(msg: string, color: string) {
   message.value = msg;
   messageColor.value = color;