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

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;

package/components/PublicOnboarding/ContractorRegistrationForm.vue

@@ -0,0 +1,278 @@
+<template>
+  <v-form v-model="formValid" @submit.prevent="submit">
+    <v-row no-gutters>
+      <v-col cols="12" class="mb-4">
+        <p class="text-caption text-medium-emphasis mb-2">Arrival Date</p>
+        <InputDatePicker v-model="visitor.expectedCheckIn" placeholder="DD/MM/YYYY" :rules="[requiredRule]" />
+      </v-col>
+
+      <v-col cols="12" class="mb-4">
+        <v-select
+          v-model="visitor.contractorType"
+          :items="contractorTypes"
+          item-title="title"
+          item-value="value"
+          label="Contractor Type"
+          density="comfortable"
+          variant="outlined"
+          hide-details
+        />
+      </v-col>
+
+      <v-col cols="12" class="mb-4">
+        <v-text-field
+          v-model="visitor.name"
+          label="Name"
+          density="comfortable"
+          variant="outlined"
+          :rules="[requiredRule]"
+        />
+      </v-col>
+
+      <v-col cols="12" class="mb-4">
+        <v-text-field
+          v-model="visitor.nric"
+          label="NRIC / Passport No. (Optional)"
+          density="comfortable"
+          variant="outlined"
+          hide-details
+        />
+      </v-col>
+
+      <v-col cols="12" class="mb-4">
+        <v-text-field
+          v-model="visitor.email"
+          type="email"
+          label="Email"
+          density="comfortable"
+          variant="outlined"
+          hide-details
+        />
+      </v-col>
+
+      <v-col cols="12" class="mb-1">
+        <InputPhoneNumberV2 v-model="visitor.contact" density="comfortable" :rules="[requiredRule]" />
+      </v-col>
+      <v-col v-if="isContactPickerSupported" cols="12" class="mb-4 text-right">
+        <a href="#" class="text-caption" @click.prevent="fillFromContactPicker">
+          or select contact in your phone book
+        </a>
+      </v-col>
+
+      <v-col cols="12" class="mb-4">
+        <PublicOnboardingLocationFields
+          :site="site"
+          v-model:block="visitor.block"
+          v-model:level="visitor.level"
+          v-model:unit="visitor.unit"
+        />
+      </v-col>
+
+      <v-col cols="12" class="mb-4">
+        <v-text-field
+          v-model="visitor.company"
+          label="Company Name"
+          density="comfortable"
+          variant="outlined"
+          :rules="[requiredRule]"
+        />
+      </v-col>
+
+      <v-col cols="12" class="mb-4">
+        <v-text-field
+          v-model="visitor.plateNumber"
+          label="Vehicle Number (Optional)"
+          density="comfortable"
+          variant="outlined"
+          hide-details
+        />
+      </v-col>
+
+      <v-col cols="12" class="mb-4">
+        <v-btn variant="outlined" block class="justify-space-between" append-icon="mdi-pencil-outline" @click="showMembersDialog = true">
+          {{ members.length > 0 ? `${members.length} Member(s) Added` : "Add Member" }}
+        </v-btn>
+      </v-col>
+
+      <v-col cols="12" class="mb-4">
+        <v-textarea
+          v-model="visitor.remarks"
+          label="Remarks (optional)"
+          density="comfortable"
+          variant="outlined"
+          rows="3"
+          auto-grow
+        />
+      </v-col>
+
+      <v-col v-if="submitError" cols="12" class="mb-4">
+        <v-alert type="error" variant="tonal" density="compact">{{ submitError }}</v-alert>
+      </v-col>
+
+      <v-col cols="12">
+        <v-btn color="primary" variant="flat" block size="large" :loading="submitting" :disabled="!formValid" type="submit">
+          Submit
+        </v-btn>
+      </v-col>
+    </v-row>
+
+    <v-dialog v-model="showMembersDialog" max-width="420" persistent>
+      <v-card class="pa-4">
+        <div class="d-flex align-center mb-4">
+          <v-btn icon variant="text" @click="showMembersDialog = false">
+            <v-icon>mdi-chevron-left</v-icon>
+          </v-btn>
+          <span class="text-subtitle-1 ml-2">Members</span>
+        </div>
+
+        <div
+          v-for="(member, index) in draftMembers"
+          :key="index"
+          class="pa-3 mb-3 bordered-field"
+        >
+          <v-text-field
+            v-model="member.name"
+            label="Name"
+            density="comfortable"
+            variant="outlined"
+            hide-details
+            class="mb-2"
+          />
+          <v-text-field
+            v-model="member.nric"
+            label="NRIC / Passport No. (Optional)"
+            density="comfortable"
+            variant="outlined"
+            hide-details
+            class="mb-2"
+          />
+          <InputPhoneNumberV2 v-model="member.contact" density="comfortable" hide-details />
+        </div>
+
+        <v-btn variant="outlined" block class="mb-3" prepend-icon="mdi-plus" @click="addDraftMember">
+          Add
+        </v-btn>
+        <v-btn color="primary" variant="flat" block @click="saveMembers">Save</v-btn>
+      </v-card>
+    </v-dialog>
+  </v-form>
+</template>
+
+<script lang="ts" setup>
+const prop = defineProps({
+  site: { type: String, required: true },
+});
+
+const emit = defineEmits(["done"]);
+
+const { createVisitor } = usePublicVisitorOnboarding();
+const { isSupported: isContactPickerSupported, pickContact } = useContactPicker();
+
+const requiredRule = (v: any) => (v !== null && v !== undefined && v !== "") || "This field is required";
+
+const contractorTypes = [
+  { title: "Home Contractor", value: "home-contractor" },
+  { title: "House Mover", value: "house-mover" },
+  { title: "Estate Contractor", value: "estate-contractor" },
+  { title: "Property Agent", value: "property-agent" },
+];
+
+const visitor = reactive({
+  expectedCheckIn: null as string | null,
+  contractorType: "",
+  name: "",
+  nric: "",
+  email: "",
+  contact: "",
+  block: "",
+  level: "",
+  unit: "",
+  company: "",
+  plateNumber: "",
+  remarks: "",
+});
+
+type TDraftMember = { name: string; nric: string; contact: string };
+const members = ref<TDraftMember[]>([]);
+const draftMembers = ref<TDraftMember[]>([]);
+const showMembersDialog = ref(false);
+
+watch(showMembersDialog, (open) => {
+  if (open) {
+    draftMembers.value = members.value.length
+      ? members.value.map((m) => ({ ...m }))
+      : [{ name: "", nric: "", contact: "" }];
+  }
+});
+
+function addDraftMember() {
+  draftMembers.value.push({ name: "", nric: "", contact: "" });
+}
+
+function saveMembers() {
+  members.value = draftMembers.value.filter((m) => m.name && m.contact);
+  showMembersDialog.value = false;
+}
+
+const formValid = ref(false);
+const submitting = ref(false);
+const submitError = ref("");
+
+async function fillFromContactPicker() {
+  const contact = await pickContact();
+  if (!contact) return;
+  if (contact.name) visitor.name = contact.name;
+  if (contact.tel) visitor.contact = contact.tel;
+}
+
+async function submit() {
+  submitError.value = "";
+  submitting.value = true;
+  try {
+    const payload: Record<string, any> = {
+      type: "contractor",
+      contractorType: visitor.contractorType || undefined,
+      name: visitor.name,
+      contact: visitor.contact,
+      nric: visitor.nric || undefined,
+      email: visitor.email || undefined,
+      block: visitor.block || undefined,
+      level: visitor.level || undefined,
+      unit: visitor.unit || undefined,
+      company: visitor.company,
+      plateNumber: visitor.plateNumber || undefined,
+      remarks: visitor.remarks || undefined,
+      members: members.value.length ? members.value : undefined,
+    };
+
+    const res: any = await createVisitor(prop.site, payload);
+    emit("done", res?.status || "pending");
+  } catch (error: any) {
+    submitError.value =
+      error?.data?.message || error?.message || "Unable to submit your registration. Please try again.";
+  } finally {
+    submitting.value = false;
+  }
+}
+</script>
+
+<style scoped>
+/* Matches the surrounding v-text-field/InputPhoneNumberV2 fields' own
+   border color (Vuetify's border color/opacity token) - the per-member row
+   in the Members dialog isn't a real Vuetify field, so without this it was
+   the one inconsistent border on the form. */
+.bordered-field {
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: 4px;
+}
+
+/* InputDatePicker/InputPhoneNumberV2 hardcode `.filter-field` on their own
+   internal v-text-field/v-select, which sets border-radius: var(--r-inner)
+   globally (assets/css/screens.css) - overriding it just within this form
+   (including inside the teleported Members dialog; :deep()'s scoping
+   attribute stays on the element through teleport) rather than in the
+   shared components themselves, which are also used elsewhere. */
+:deep(.filter-field .v-field) {
+  border-radius: 4px;
+}
+</style>