@7365admin1/layer-common 3.0.7 → 3.0.9

package/components/VisitorForm.vue

@@ -1,7 +1,11 @@
 <template>
   <v-card width="100%" :loading="processing">
     <v-toolbar>
-      <v-row no-gutters class="fill-height px-6 d-flex justify-space-between align-center" align="center">
+      <v-row
+        no-gutters
+        class="fill-height px-6 d-flex justify-space-between align-center"
+        align="center"
+      >
         <span class="font-weight-bold text-h5 text-capitalize">
           {{ prop.mode }} {{ formatVisitorType(type) }}
         </span>
@@ -12,25 +16,54 @@
       <div class="w-100 d-flex justify-space-between ga-2">
         <span class="text-subtitle-1 w-100 font-weight-bold mb-3">{{
           formTitle
-          }}</span>
-        <span v-if="withStep2 || withStep3" class="text-subtitle-2 font-weight-bold" style="text-wrap: nowrap">Step
-          <span class="text-primary-button">{{ contractorStep }}</span>/{{ withStep3 ? 3 : withStep2 ? 2 : 1 }}</span>
+        }}</span>
+        <span
+          v-if="withStep2 || withStep3"
+          class="text-subtitle-2 font-weight-bold"
+          style="text-wrap: nowrap"
+          >Step <span class="text-primary-button">{{ contractorStep }}</span
+          >/{{ withStep3 ? 3 : withStep2 ? 2 : 1 }}</span
+        >
       </div>
-      <v-form ref="formRef" v-model="validForm" :disabled="processing" @click="errorMessage = ''">
+      <v-form
+        ref="formRef"
+        v-model="validForm"
+        :disabled="processing"
+        @click="errorMessage = ''"
+      >
         <v-row no-gutters class="pt-4">
           <v-col v-if="shouldShowField('contractorType')" cols="12">
-            <InputLabel class="text-capitalize" title="Contractor Type" required />
-            <v-combobox v-model="contractorTypeObj" v-model:search="contractorTypeInput" ref="contractorTypeCombo"
-              autocomplete="off" :hide-no-data="false" @update:focused="handleFocusedContractorType"
-              :items="contractorTypes" :rules="[requiredRule]" item-value="value"
-              @update:model-value="handleSelectContractorType" variant="outlined" density="comfortable" persistent-hint
-              small-chips>
+            <InputLabel
+              class="text-capitalize"
+              title="Contractor Type"
+              required
+            />
+            <v-combobox
+              v-model="contractorTypeObj"
+              v-model:search="contractorTypeInput"
+              ref="contractorTypeCombo"
+              autocomplete="off"
+              :hide-no-data="false"
+              @update:focused="handleFocusedContractorType"
+              :items="contractorTypes"
+              :rules="[requiredRule]"
+              item-value="value"
+              @update:model-value="handleSelectContractorType"
+              variant="outlined"
+              density="comfortable"
+              persistent-hint
+              small-chips
+            >
               <template v-slot:no-data>
                 <v-list-item>
-                  <v-list-item-title @click.stop="handleAddNewContractorType" class="d-flex align-center ga-1">
+                  <v-list-item-title
+                    @click.stop="handleAddNewContractorType"
+                    class="d-flex align-center ga-1"
+                  >
                     <span><v-icon icon="mdi-plus" /></span> Add "<strong>{{
                       contractorTypeInput
-                      }}</strong>" as custom contractor type.
+                    }}</strong
+                    >" as custom contractor type.
                   </v-list-item-title>
                 </v-list-item>
               </template>
@@ -39,14 +72,26 @@
 
           <v-col v-if="shouldShowField('attachments')" class="w-100">
             <InputLabel class="text-capitalize" title="Attach Image" />
-            <InputFileV2 v-model="visitor.attachments" multiple :max-length="3" />
+            <InputFileV2
+              v-model="visitor.attachments"
+              multiple
+              :max-length="3"
+            />
           </v-col>
 
           <v-col v-if="shouldShowField('name')" cols="12">
             <v-row>
               <v-col cols="12">
-                <InputLabel class="text-capitalize" title="Full Name" required />
-                <v-text-field v-model.trim="visitor.name" density="comfortable" :rules="[requiredRule]" />
+                <InputLabel
+                  class="text-capitalize"
+                  title="Full Name"
+                  required
+                />
+                <v-text-field
+                  v-model.trim="visitor.name"
+                  density="comfortable"
+                  :rules="[requiredRule]"
+                />
               </v-col>
             </v-row>
           </v-col>
@@ -54,25 +99,44 @@
           <v-col v-if="shouldShowField('nric')" cols="12">
             <v-row>
               <v-col cols="12">
-                <InputLabel class="text-capitalize" title="NRIC" :required="requireNRIC" />
-                <InputNRICNumber v-model="visitor.nric" density="comfortable"
-                  :rules="[requireNRIC ? requiredRule : () => true]" :key="currentAutofillSource + 'nric-key'"
-                  @update:model-value="handleUpdateNRIC" :loading="fetchPersonByNRICPending" />
+                <InputLabel
+                  class="text-capitalize"
+                  title="NRIC"
+                  :required="requireNRIC"
+                />
+                <InputNRICNumber
+                  v-model="visitor.nric"
+                  density="comfortable"
+                  :rules="[requireNRIC ? requiredRule : () => true]"
+                  :key="currentAutofillSource + 'nric-key'"
+                  @update:model-value="handleUpdateNRIC"
+                  :loading="fetchPersonByNRICPending"
+                />
               </v-col>
             </v-row>
           </v-col>
 
           <v-col v-if="shouldShowField('contact')" cols="12">
             <InputLabel class="text-capitalize" title="Phone Number" required />
-            <InputPhoneNumberV2 v-model="visitor.contact" :rules="[requiredRule]" density="comfortable"
-              :key="currentAutofillSource + 'phone-key'" :loading="fetchPersonByContactPending"
-              @update:model-value="handleUpdateContact" />
+            <InputPhoneNumberV2
+              v-model="visitor.contact"
+              :rules="[requiredRule]"
+              density="comfortable"
+              :key="currentAutofillSource + 'phone-key'"
+              :loading="fetchPersonByContactPending"
+              @update:model-value="handleUpdateContact"
+            />
           </v-col>
 
           <v-col v-if="shouldShowField('deliveryType')" cols="12">
             <v-row>
               <v-col cols="12">
-                <v-radio-group v-model="visitor.deliveryType" inline color="primary" :rules="[requiredRule]">
+                <v-radio-group
+                  v-model="visitor.deliveryType"
+                  inline
+                  color="primary"
+                  :rules="[requiredRule]"
+                >
                   <v-radio label="Food" value="Food"></v-radio>
                   <v-radio label="Parcel" value="Parcel"></v-radio>
                 </v-radio-group>
@@ -83,22 +147,44 @@
           <template v-if="shouldShowField('company')">
             <v-col cols="12">
               <InputLabel class="text-capitalize" title="Company Name" />
-              <v-combobox v-model="visitor.company" v-model:search="companyNameInput" ref="companyCombo"
-                autocomplete="off" :hide-no-data="false" :items="companyNames" item-value="value"
-                :loading="fetchCompanyListPending" @update:model-value="handleSelectCompanyName" variant="outlined"
-                density="comfortable" persistent-hint small-chips>
+              <v-combobox
+                v-model="visitor.company"
+                v-model:search="companyNameInput"
+                ref="companyCombo"
+                autocomplete="off"
+                :hide-no-data="false"
+                :items="companyNames"
+                item-value="value"
+                :loading="fetchCompanyListPending"
+                @update:model-value="handleSelectCompanyName"
+                variant="outlined"
+                density="comfortable"
+                persistent-hint
+                small-chips
+              >
                 <template v-slot:no-data>
                   <v-list-item>
                     <v-list-item-title v-if="fetchCompanyListPending">
-                      <v-progress-circular indeterminate size="20" class="mr-3" />
+                      <v-progress-circular
+                        indeterminate
+                        size="20"
+                        class="mr-3"
+                      />
                       Searching companies…
                     </v-list-item-title>
-                    <v-list-item-title v-else-if="companyNameInput" @click.stop="handleAddNewCompany"
-                      class="d-flex align-center ga-1">
-                      <span><v-icon icon="mdi-plus" /></span>Add "<strong>{{ companyNameInput }}</strong>" as new
-                      company.
+                    <v-list-item-title
+                      v-else-if="companyNameInput"
+                      @click.stop="handleAddNewCompany"
+                      class="d-flex align-center ga-1"
+                    >
+                      <span><v-icon icon="mdi-plus" /></span>Add "<strong>{{
+                        companyNameInput
+                      }}</strong
+                      >" as new company.
                     </v-list-item-title>
-                    <v-list-item-title v-else-if="!companyNameInput && companyNames.length === 0">
+                    <v-list-item-title
+                      v-else-if="!companyNameInput && companyNames.length === 0"
+                    >
                       Start typing to search for companies.
                     </v-list-item-title>
                     <v-list-item-title v-else>
@@ -113,21 +199,43 @@
           <template v-if="shouldShowField('delivery-company')">
             <v-col cols="12">
               <InputLabel class="text-capitalize" title="Delivery Company" />
-              <v-combobox v-model="deliveryCompany" v-model:search="deliveryCompanyInput" ref="companyCombo"
-                autocomplete="off" :hide-no-data="false" :items="deliveryCompanyList" item-value="value"
-                :loading="siteDataPending" variant="outlined" density="comfortable" persistent-hint small-chips>
+              <v-combobox
+                v-model="deliveryCompany"
+                v-model:search="deliveryCompanyInput"
+                ref="companyCombo"
+                autocomplete="off"
+                :hide-no-data="false"
+                :items="deliveryCompanyList"
+                item-value="value"
+                :loading="siteDataPending"
+                variant="outlined"
+                density="comfortable"
+                persistent-hint
+                small-chips
+              >
                 <template v-slot:no-data>
                   <v-list-item>
                     <v-list-item-title v-if="fetchCompanyListPending">
-                      <v-progress-circular indeterminate size="20" class="mr-3" />
+                      <v-progress-circular
+                        indeterminate
+                        size="20"
+                        class="mr-3"
+                      />
                       Searching companies…
                     </v-list-item-title>
-                    <v-list-item-title v-else-if="companyNameInput" @click.stop="handleAddNewCompany"
-                      class="d-flex align-center ga-1">
-                      <span><v-icon icon="mdi-plus" /></span>Add "<strong>{{ companyNameInput }}</strong>" as new
-                      company.
+                    <v-list-item-title
+                      v-else-if="companyNameInput"
+                      @click.stop="handleAddNewCompany"
+                      class="d-flex align-center ga-1"
+                    >
+                      <span><v-icon icon="mdi-plus" /></span>Add "<strong>{{
+                        companyNameInput
+                      }}</strong
+                      >" as new company.
                     </v-list-item-title>
-                    <v-list-item-title v-else-if="!companyNameInput && companyNames.length === 0">
+                    <v-list-item-title
+                      v-else-if="!companyNameInput && companyNames.length === 0"
+                    >
                       Start typing to search for companies.
                     </v-list-item-title>
                     <v-list-item-title v-else>
@@ -139,60 +247,138 @@
             </v-col>
           </template>
 
-
           <v-col v-if="shouldShowField('plateNumber')" cols="12">
             <v-row>
               <v-col cols="12">
-                <InputLabel class="text-capitalize" title="Vehicle Number" required />
+                <InputLabel
+                  class="text-capitalize"
+                  title="Vehicle Number"
+                  required
+                />
                 <!-- <v-text-field v-model.trim.uppercase="visitor.plateNumber" density="comfortable" /> -->
-                <InputVehicleNumber v-model="visitor.plateNumber" density="comfortable" />
+                <InputVehicleNumber
+                  v-model="visitor.plateNumber"
+                  density="comfortable"
+                />
               </v-col>
             </v-row>
           </v-col>
 
           <v-col v-if="shouldShowField('block')" cols="12">
             <InputLabel class="text-capitalize" title="Block" required />
-            <v-autocomplete v-model="visitor.block" :items="blocksArray" item-value="value" autocomplete="off" item-title="title" :key="blockListDataPending ? 'block-list-pending' : 'block-list-ready'"
-              :loading="blockListDataPending" @update:model-value="handleChangeBlock" density="comfortable"
-              :rules="[requiredRule]" />
+            <v-autocomplete
+              v-model="visitor.block"
+              :items="blocksArray"
+              item-value="value"
+              autocomplete="off"
+              item-title="title"
+              :key="
+                blockListDataPending ? 'block-list-pending' : 'block-list-ready'
+              "
+              :loading="blockListDataPending"
+              @update:model-value="handleChangeBlock"
+              density="comfortable"
+              :rules="[requiredRule]"
+            />
           </v-col>
 
           <v-col v-if="shouldShowField('level')" cols="12">
             <InputLabel class="text-capitalize" title="Level" required />
-            <v-autocomplete v-model="visitor.level" :items="levelsArray"  density="comfortable" autocomplete="off"
-              :disabled="!visitor.block" :key="levelListDataPending ? 'level-list-pending' : 'level-list-ready'"  :loading="levelsDataPending" @update:model-value="handleChangeLevel"
-              :rules="[requiredRule]" />
+            <v-autocomplete
+              v-model="visitor.level"
+              :items="levelsArray"
+              density="comfortable"
+              autocomplete="off"
+              :disabled="!visitor.block"
+              :key="
+                levelListDataPending ? 'level-list-pending' : 'level-list-ready'
+              "
+              :loading="levelsDataPending"
+              @update:model-value="handleChangeLevel"
+              :rules="[requiredRule]"
+            />
           </v-col>
           <v-col v-if="shouldShowField('unit')" cols="12">
             <InputLabel class="text-capitalize" title="Unit" required />
-            <v-autocomplete v-model="visitor.unit" :items="unitsArray" density="comfortable" autocomplete="off" item-title="title"
-              item-value="value" :disabled="!visitor.level" :key="unitListDataPending ? 'unit-list-pending' : 'unit-list-ready'" :loading="unitsDataPending" :rules="[requiredRule]"
-              @update:model-value="handleUpdateUnit" />
+            <v-autocomplete
+              v-model="visitor.unit"
+              :items="unitsArray"
+              density="comfortable"
+              autocomplete="off"
+              item-title="title"
+              item-value="value"
+              :disabled="!visitor.level"
+              :key="
+                unitListDataPending ? 'unit-list-pending' : 'unit-list-ready'
+              "
+              :loading="unitsDataPending"
+              :rules="[requiredRule]"
+              @update:model-value="handleUpdateUnit"
+            />
           </v-col>
 
           <v-col v-if="shouldShowField('unit')" cols="12">
-            <InputLabel class="text-capitalize" title="Registered Unit Company Name" required
-              :key="'unit-key' + visitor.level" />
-            <v-text-field v-model.trim="registeredUnitCompanyName" density="comfortable"
-              :loading="buildingUnitDataPending" readonly class="no-pointer" />
+            <InputLabel
+              class="text-capitalize"
+              title="Registered Unit Company Name"
+              required
+              :key="'unit-key' + visitor.level"
+            />
+            <v-text-field
+              v-model.trim="registeredUnitCompanyName"
+              density="comfortable"
+              :loading="buildingUnitDataPending"
+              readonly
+              class="no-pointer"
+            />
           </v-col>
 
           <v-col v-if="shouldShowField('remarks')" cols="12">
             <InputLabel class="text-capitalize" title="Remarks" />
-            <v-textarea v-model="visitor.remarks" density="comfortable" :rows="3" no-resize />
+            <v-textarea
+              v-model="visitor.remarks"
+              density="comfortable"
+              :rows="3"
+              no-resize
+            />
           </v-col>
 
-          <v-col v-if="(withStep2 || withStep3) && contractorStep === 2" cols="12">
-            <PassInformation v-model:pass="visitor.visitorPass" v-model:keys="visitor.passKeys" :site="prop.site"
-              :type="prop.type" :contractor-type="visitor.contractorType" :hide-keys="!showShowKeysField" />
-            <EntryPassInformation v-if="entryPassSettings?.data?.settings?.nfcPass" v-model="passType"
-              v-model:quantity="passQuantity" v-model:cards="passCards" :settings="entryPassSettings"
-              :loading="entryPassSettingsPending" :site-id="prop.site" :unit-id="visitor.unit || null" />
+          <v-col
+            v-if="(withStep2 || withStep3) && contractorStep === 2"
+            cols="12"
+          >
+            <PassInformation
+              v-model:pass="visitor.visitorPass"
+              v-model:keys="visitor.passKeys"
+              :site="prop.site"
+              :type="prop.type"
+              :contractor-type="visitor.contractorType"
+              :hide-keys="!showShowKeysField"
+              :passKeys="visitor.passKeys"
+            />
+            <EntryPassInformation
+              v-if="showEntryPassInformation"
+              v-model="passType"
+              v-model:quantity="passQuantity"
+              v-model:cards="passCards"
+              :settings="entryPassSettings"
+              :loading="entryPassSettingsPending || siteDataPending"
+              :site-id="prop.site"
+              :unit-id="visitor.unit || null"
+              :visitor-type="prop.type"
+              :hid-qr-code-enabled="hidQrCodePassAllowed"
+              :hid-qr-printer-configured="hasHidQrPrinterConfig"
+            />
           </v-col>
 
           <v-col v-if="withStep3 && contractorStep === 3" cols="12">
-            <MemberInformation v-model="visitor.members" :type="prop.type" :contractor-type="visitor.contractorType"
-              :site="prop.site" :selected-visitor-pass="visitor.visitorPass" />
+            <MemberInformation
+              v-model="visitor.members"
+              :type="prop.type"
+              :contractor-type="visitor.contractorType"
+              :site="prop.site"
+              :selected-visitor-pass="visitor.visitorPass"
+            />
           </v-col>
 
           <v-col v-if="prop.mode === 'add'" cols="12" class="mt-2">
@@ -216,33 +402,89 @@
     <v-toolbar density="compact">
       <v-row no-gutters>
         <v-col cols="6">
-          <v-btn v-if="
-            prop.mode === 'add' &&
-            (withStep2 || withStep3) &&
-            contractorStep > 1
-          " tile block variant="text" class="text-none" size="48" @click="handleGoToPreviousPage" text="Back" />
-          <v-btn v-else-if="prop.mode === 'add' || prop.mode === 'register'" tile block variant="text" class="text-none"
-            size="48" @click="backToSelection" text="Back to Selection" />
-          <v-btn v-else tile block variant="text" class="text-none" size="48" @click="emit('close:all')" text="Close" />
+          <v-btn
+            v-if="
+              prop.mode === 'add' &&
+              (withStep2 || withStep3) &&
+              contractorStep > 1
+            "
+            tile
+            block
+            variant="text"
+            class="text-none"
+            size="48"
+            @click="handleGoToPreviousPage"
+            text="Back"
+          />
+          <v-btn
+            v-else-if="prop.mode === 'add' || prop.mode === 'register'"
+            tile
+            block
+            variant="text"
+            class="text-none"
+            size="48"
+            @click="backToSelection"
+            text="Back to Selection"
+          />
+          <v-btn
+            v-else
+            tile
+            block
+            variant="text"
+            class="text-none"
+            size="48"
+            @click="emit('close:all')"
+            text="Close"
+          />
         </v-col>
         <v-col cols="6">
-          <v-btn v-if="showNextButton" tile block variant="flat" color="primary-button" class="text-none" size="48"
-            :disabled="processing" @click="handleNextPage" :text="'Next'" />
-          <v-btn v-else tile block variant="flat" color="black" class="text-none" size="48"
-            :disabled="!validForm || processing || membersFieldIncomplete" @click="submit"
-            :text="prop.mode == 'add' ? 'Submit' : 'Update'" />
+          <v-btn
+            v-if="showNextButton"
+            tile
+            block
+            variant="flat"
+            color="primary-button"
+            class="text-none"
+            size="48"
+            :disabled="processing"
+            @click="handleNextPage"
+            :text="'Next'"
+          />
+          <v-btn
+            v-else
+            tile
+            block
+            variant="flat"
+            color="black"
+            class="text-none"
+            size="48"
+            :disabled="!validForm || processing || membersFieldIncomplete"
+            @click="submit"
+            :text="prop.mode == 'add' ? 'Submit' : 'Update'"
+          />
         </v-col>
       </v-row>
     </v-toolbar>
 
-    <v-dialog v-model="dialog.vehicleNumberUsersList" v-if="vehicleNumberUserItems.length > 0" persistent
-      max-width="600">
-      <SearchVehicleNumberUser :vehicle-number="visitor.plateNumber ?? ''"
-        :vehicle-number-users-list="vehicleNumberUserItems" @close="dialog.vehicleNumberUsersList = false"
-        @update:people="handleAutofillDataViaVehicleNumber" />
+    <v-dialog
+      v-model="dialog.vehicleNumberUsersList"
+      v-if="vehicleNumberUserItems.length > 0"
+      persistent
+      max-width="600"
+    >
+      <SearchVehicleNumberUser
+        :vehicle-number="visitor.plateNumber ?? ''"
+        :vehicle-number-users-list="vehicleNumberUserItems"
+        @close="dialog.vehicleNumberUsersList = false"
+        @update:people="handleAutofillDataViaVehicleNumber"
+      />
     </v-dialog>
 
-    <v-dialog v-model="dialog.showNonCheckedOutDialog" max-width="700" persistent>
+    <v-dialog
+      v-model="dialog.showNonCheckedOutDialog"
+      max-width="700"
+      persistent
+    >
       <v-card :loading="loading.checkingOut">
         <v-toolbar>
           <v-toolbar-title>
@@ -255,10 +497,13 @@
         </v-toolbar>
 
         <v-card-text>
-
           <v-list lines="three">
-            <v-list-item v-if="matchingPlateNumberNonCheckedOutArr.length > 0"
-              v-for="v in matchingPlateNumberNonCheckedOutArr" :key="v._id" class="cursor-pointer">
+            <v-list-item
+              v-if="matchingPlateNumberNonCheckedOutArr.length > 0"
+              v-for="v in matchingPlateNumberNonCheckedOutArr"
+              :key="v._id"
+              class="cursor-pointer"
+            >
               <v-list-item-title>
                 {{ v.plateNumber }} - {{ v.name }}
               </v-list-item-title>
@@ -268,14 +513,19 @@
               </v-list-item-subtitle>
 
               <template #append>
-                <v-btn size="x-small" class="text-capitalize" color="red" text="Checkout"
-                  :loading="loading.checkingOut && v?._id === prop.visitorData?._id"
-                  @click.stop="handleCheckout(v._id)" />
+                <v-btn
+                  size="x-small"
+                  class="text-capitalize"
+                  color="red"
+                  text="Checkout"
+                  :loading="
+                    loading.checkingOut && v?._id === prop.visitorData?._id
+                  "
+                  @click.stop="handleCheckout(v._id)"
+                />
               </template>
-
             </v-list-item>
           </v-list>
-
         </v-card-text>
       </v-card>
     </v-dialog>
@@ -283,9 +533,9 @@
 </template>
 
 <script setup lang="ts">
-import useBuildingUnit from '../composables/useBuildingUnit';
-import useWebUsb from '../composables/useWebUsb';
-
+import { propsFactory } from "vuetify/lib/util/propsFactory.mjs";
+import useBuildingUnit from "../composables/useBuildingUnit";
+import useWebUsb from "../composables/useWebUsb";
 
 const prop = defineProps({
   type: {
@@ -308,21 +558,37 @@ const prop = defineProps({
     type: Object as PropType<Partial<TVisitor> | null>,
     default: null,
   },
+  currentUser: {
+    type: String,
+    default: "",
+  },
 });
 
 type AutofillSource = "nric" | "contact" | "vehicleNumber" | null;
 const currentAutofillSource = ref<AutofillSource>(null);
 
-
 const { requiredRule, debounce, UTCToLocalTIme } = useUtils();
 const { getSiteById } = useSiteSettings();
-const { getBlocksSelection, getLevelsSelection, getUnitSelection } = useBuilding();
-const { createVisitor, typeFieldMap, contractorTypes, getVisitors, updateVisitor } = useVisitor();
-const { getBySiteId: getEntryPassSettingsBySiteId } = useSiteEntryPassSettings();
+const { getBlocksSelection, getLevelsSelection, getUnitSelection } =
+  useBuilding();
+const {
+  createVisitor,
+  typeFieldMap,
+  contractorTypes,
+  getVisitors,
+  updateVisitor,
+} = useVisitor();
+const { getBySiteId: getEntryPassSettingsBySiteId } =
+  useSiteEntryPassSettings();
 const { createVisitorPass, signQr } = useAccessManagement();
 const { testConnection } = useWebUsb();
-const { findPersonByNRIC, findPersonByContact, searchCompanyList, findUsersByPlateNumber } = usePeople()
-const { getById: getUnitDataById } = useBuildingUnit()
+const {
+  findPersonByNRIC,
+  findPersonByContact,
+  searchCompanyList,
+  findUsersByPlateNumber,
+} = usePeople();
+const { getById: getUnitDataById } = useBuildingUnit();
 
 const emit = defineEmits([
   "back",
@@ -331,7 +597,7 @@ const emit = defineEmits([
   "done:more",
   "error",
   "close",
-  "close:all"
+  "close:all",
 ]);
 
 const visitor = reactive<Partial<TVisitorPayload>>({
@@ -350,14 +616,16 @@ const visitor = reactive<Partial<TVisitorPayload>>({
   attachments: [],
   members: [],
   visitorPass: [],
-  passKeys: []
+  passKeys: [],
 });
 
 const passType = ref<string | null>(null);
 const passQuantity = ref<number | null>(1);
 const passCards = ref<{ _id: string; cardNo: string }[]>([]);
+const hidQrPrintPayload = ref<string | null>(null);
+const hidQrPrinted = ref(false);
 
-const registeredUnitCompanyName = ref('N/A')
+const registeredUnitCompanyName = ref("N/A");
 
 const dialog = reactive({
   vehicleNumberUsersList: false,
@@ -366,7 +634,7 @@ const dialog = reactive({
 
 const loading = reactive({
   checkingOut: false,
-})
+});
 
 const validForm = ref(false);
 const formRef = ref<HTMLFormElement | null>(null);
@@ -382,7 +650,6 @@ const contractorStep = ref(1);
 const companyNameInput = ref("");
 const companyNameObj = ref<string | null>(null);
 
-
 const blocksArray = ref<TDefaultOptionObj[]>([]);
 const levelsArray = ref<TDefaultOptionObj[]>([]);
 const unitsArray = ref<TDefaultOptionObj[]>([]);
@@ -391,13 +658,13 @@ const deliveryCompany = ref("");
 const deliveryCompanyInput = ref("");
 const deliveryCompanyList = ref<string[]>([]);
 
-const matchingPlateNumberNonCheckedOutArr = ref<TVisitor[]>([])
-
-
-const vehicleNumberUserItems = ref<TPeople[]>([])
+const matchingPlateNumberNonCheckedOutArr = ref<TVisitor[]>([]);
 
+const vehicleNumberUserItems = ref<TPeople[]>([]);
 
-const shouldShowField = (fieldKey: keyof TVisitorPayload | 'delivery-company') => {
+const shouldShowField = (
+  fieldKey: keyof TVisitorPayload | "delivery-company"
+) => {
   if ((!withStep2.value && !withStep3.value) || contractorStep.value === 1) {
     const visibleFields = typeFieldMap[prop.type];
     return visibleFields?.includes(fieldKey);
@@ -407,31 +674,72 @@ const shouldShowField = (fieldKey: keyof TVisitorPayload | 'delivery-company') =
 const withStep2 = computed(() => {
   const step2Types = ["guest", "walk-in"];
   return step2Types.includes(prop.type);
-})
+});
 
 const withStep3 = computed(() => {
   const step3Types = ["contractor"];
   return step3Types.includes(prop.type);
-})
+});
 
 const showNextButton = computed(() => {
   if (withStep3.value) {
-    return contractorStep.value === 1 || contractorStep.value === 2
+    return contractorStep.value === 1 || contractorStep.value === 2;
   } else if (withStep2.value) {
-    return contractorStep.value === 1
-  } else return false
-})
+    return contractorStep.value === 1;
+  } else return false;
+});
 
 const showShowKeysField = computed(() => {
-  return prop.type === "contractor"
-})
+  return ["guest", "contractor", "walk-in"].includes(prop.type);
+});
 
 const requireNRIC = computed(() => {
-  return prop.type !== 'walk-in' && prop.type !== 'guest';
-})
+  return prop.type !== "walk-in" && prop.type !== "guest";
+});
+
+const hidQrCodePassConfig = computed(() => {
+  return (siteData.value as any)?.metadata?.hidQrCodePass || {};
+});
+
+const hidQrCodePassEnabled = computed(() => {
+  return Boolean(hidQrCodePassConfig.value?.enabled);
+});
+
+const hidQrPrinterConfig = computed(() => {
+  return hidQrCodePassConfig.value?.printer || {};
+});
+
+const hasHidQrPrinterConfig = computed(() => {
+  return Boolean(hidQrPrinterConfig.value?.vendorId && hidQrPrinterConfig.value?.productId);
+});
+
+const hidQrTemplate = computed(() => {
+  return hidQrCodePassConfig.value?.template || {};
+});
+
+const hidQrValidityMinutes = computed(() => {
+  const value = Number(hidQrCodePassConfig.value?.validityMinutes);
+  return Number.isFinite(value) && value > 0 ? value : 60;
+});
+
+const hidQrCodePassAllowed = computed(() => {
+  return hidQrCodePassEnabled.value && ["guest", "contractor", "walk-in"].includes(prop.type);
+});
 
-const companyNames = ref<string[]>([])
-const companyAutofillDataArray = ref<{ companyName: string[], unit: string, block: number, level: string, unitName: string }[]>([])
+const showEntryPassInformation = computed(() => {
+  return Boolean(entryPassSettings.value?.data?.settings?.nfcPass || hidQrCodePassAllowed.value);
+});
+
+const companyNames = ref<string[]>([]);
+const companyAutofillDataArray = ref<
+  {
+    companyName: string[];
+    unit: string;
+    block: number;
+    level: string;
+    unitName: string;
+  }[]
+>([]);
 
 const formTitle = computed(() => {
   const isContractorForm = prop.type === "contractor";
@@ -461,21 +769,21 @@ function handleFocusedContractorType() {
   // }
 }
 
-const contractorTypeCombo = ref(null)
+const contractorTypeCombo = ref(null);
 
 async function handleAddNewContractorType() {
-  visitor.contractorType = contractorTypeInput.value
+  visitor.contractorType = contractorTypeInput.value;
 
-  const combo = contractorTypeCombo.value as any
+  const combo = contractorTypeCombo.value as any;
   await nextTick();
 
   combo.isMenuActive = false;
-  combo.$el.querySelector("input")?.blur(); ``
-
+  combo.$el.querySelector("input")?.blur();
+  ``;
 }
 
 async function handleSelectCompanyName(company: string) {
-  visitor.company = company
+  visitor.company = company;
   // const selected = companyAutofillDataArray.value.find(x => x.companyName?.includes(company))
   // if (!selected) return
 
@@ -485,48 +793,46 @@ async function handleSelectCompanyName(company: string) {
   // visitor.unitName = selected.unitName || ""
 }
 
-const companyCombo = ref(null)
+const companyCombo = ref(null);
 
 async function handleAddNewCompany() {
-  visitor.company = companyNameInput.value
+  visitor.company = companyNameInput.value;
 
-  const combo = companyCombo.value as any
+  const combo = companyCombo.value as any;
   await nextTick();
 
   combo.isMenuActive = false;
   combo.$el.querySelector("input")?.blur();
 }
 
-
 const {
   data: fetchPersonByNRICReq,
   refresh: fetchPersonByNRICRefresh,
   pending: fetchPersonByNRICPending,
 } = useLazyAsyncData(`fetch-person`, () => {
   const NRIC = visitor.nric;
-  if (!NRIC) return Promise.resolve(null)
-  return findPersonByNRIC(NRIC)
-}
-);
+  if (!NRIC) return Promise.resolve(null);
+  return findPersonByNRIC(NRIC);
+});
 
 watch(fetchPersonByNRICReq, (obj) => {
   if (obj) {
     currentAutofillSource.value = "nric";
-    companyNames.value = obj.companyName ?? []
-    visitor.name = obj.name
-    visitor.contact = obj.contact
+    companyNames.value = obj.companyName ?? [];
+    visitor.name = obj.name;
+    visitor.contact = obj.contact;
     if (!visitor.company) {
-      visitor.company = companyNames.value?.[0]
+      visitor.company = companyNames.value?.[0];
     }
-    visitor.block = obj.block ?? ""
-    visitor.level = obj.level ?? ""
-    visitor.unit = obj.unit ?? ""
+    visitor.block = obj.block ?? "";
+    visitor.level = obj.level ?? "";
+    visitor.unit = obj.unit ?? "";
 
     setTimeout(() => {
       currentAutofillSource.value = null;
     }, 1000);
   }
-})
+});
 
 const {
   data: fetchPersonByContactReq,
@@ -534,82 +840,86 @@ const {
   pending: fetchPersonByContactPending,
 } = useLazyAsyncData(`fetch-contact`, () => {
   const contact = visitor.contact;
-  if (!contact) return Promise.resolve(null)
-  return findPersonByContact(contact)
-}
-);
+  if (!contact) return Promise.resolve(null);
+  return findPersonByContact(contact);
+});
 
 watch(fetchPersonByContactReq, (obj: Partial<TPerson>) => {
   if (obj) {
     currentAutofillSource.value = "contact";
-    companyNames.value = obj.companyName ?? []
-    visitor.name = visitor.name ?? obj.name
+    companyNames.value = obj.companyName ?? [];
+    visitor.name = visitor.name ?? obj.name;
     if (!visitor.company) {
-      visitor.company = companyNames.value?.[0]
+      visitor.company = companyNames.value?.[0];
     }
     // visitor.block = visitor.block ?? obj.block ?? ""
     // visitor.level = visitor.level ?? obj.level ?? ""
     // visitor.unit = visitor.unit ?? obj.unit ?? ""
-    visitor.nric = visitor.nric ?? obj.nric ?? ""
+    visitor.nric = visitor.nric ?? obj.nric ?? "";
 
     setTimeout(() => {
       currentAutofillSource.value = null;
     }, 1000);
   }
-})
+});
 
 const {
   data: fetchCompanyListReq,
   refresh: fetchCompanyListRefresh,
   pending: fetchCompanyListPending,
-
 } = useLazyAsyncData(`fetch-company-list`, () => {
-  if (!companyNameInput.value) return Promise.resolve(null)
-  return searchCompanyList(companyNameInput.value)
-})
+  if (!companyNameInput.value) return Promise.resolve(null);
+  return searchCompanyList(companyNameInput.value);
+});
 
 watch(fetchCompanyListReq, (arr) => {
   if (Array.isArray(arr)) {
     companyAutofillDataArray.value = arr;
-    companyNames.value = arr?.flatMap(x => x?.companyName)
+    companyNames.value = arr?.flatMap((x) => x?.companyName);
   }
-})
+});
 const {
   data: fetchVisitorListByVehicleNumberReq,
   refresh: fetchVisitorListByVehicleNumberRefresh,
   pending: fetchVisitorListByVehicleNumberPending,
-
 } = useLazyAsyncData(`fetch-visitor-list-by-vehicle-number`, () => {
-  if (!visitor.plateNumber) return Promise.resolve(null)
-  return getVisitors({ page: 1, limit: 20, site: prop.site, plateNumber: visitor.plateNumber, checkedOut: false, status: "registered" })
-})
+  if (!visitor.plateNumber) return Promise.resolve(null);
+  return getVisitors({
+    page: 1,
+    limit: 20,
+    site: prop.site,
+    plateNumber: visitor.plateNumber,
+    checkedOut: false,
+    status: "registered",
+  });
+});
 
 watch(fetchVisitorListByVehicleNumberReq, (arr: any) => {
-  const itemsArray = arr?.items || []
-  const isValidArray = Array.isArray(itemsArray)
-  matchingPlateNumberNonCheckedOutArr.value = isValidArray ? itemsArray : []
+  const itemsArray = arr?.items || [];
+  const isValidArray = Array.isArray(itemsArray);
+  matchingPlateNumberNonCheckedOutArr.value = isValidArray ? itemsArray : [];
   if (matchingPlateNumberNonCheckedOutArr.value.length > 0) {
     dialog.showNonCheckedOutDialog = true;
   } else {
     dialog.showNonCheckedOutDialog = false;
   }
-})
-
+});
 
 const debounceSearchVisitorsByPlateNumbers = debounce(() => {
   if (!visitor.plateNumber) {
-    matchingPlateNumberNonCheckedOutArr.value = []
+    matchingPlateNumberNonCheckedOutArr.value = [];
     dialog.showNonCheckedOutDialog = false;
     return;
   }
   fetchVisitorListByVehicleNumberRefresh();
 }, 300);
 
-watch(() => visitor.plateNumber, (newVal) => {
-  debounceSearchVisitorsByPlateNumbers();
-});
-
-
+watch(
+  () => visitor.plateNumber,
+  (newVal) => {
+    debounceSearchVisitorsByPlateNumbers();
+  }
+);
 
 async function handleCheckout(visitorId: string) {
   if (!visitorId) {
@@ -624,7 +934,6 @@ async function handleCheckout(visitorId: string) {
     });
     if (res) {
       await fetchVisitorListByVehicleNumberRefresh();
-
     }
   } catch (error: any) {
     const errorMessage = error?.response?._data?.message;
@@ -636,50 +945,42 @@ async function handleCheckout(visitorId: string) {
   }
 }
 
-
-
-
-const debounceFetchCompany = debounce(async () => fetchCompanyListRefresh(), 200)
+const debounceFetchCompany = debounce(
+  async () => fetchCompanyListRefresh(),
+  200
+);
 
 watch(companyNameInput, async (val) => {
   if (!val) {
-    companyNames.value = []
-    return
+    companyNames.value = [];
+    return;
   }
-  await debounceFetchCompany()
-})
-
-
-
-
+  await debounceFetchCompany();
+});
 
 function handleAutofillDataViaVehicleNumber(item: TPeople) {
-
   currentAutofillSource.value = "vehicleNumber";
 
-  visitor.name = item.name
-  visitor.nric = item.nric
-  visitor.contact = item.contact
-  companyNames.value = item.companyName ?? []
+  visitor.name = item.name;
+  visitor.nric = item.nric;
+  visitor.contact = item.contact;
+  companyNames.value = item.companyName ?? [];
   if (!visitor.company) {
-    visitor.company = companyNames.value?.[0]
+    visitor.company = companyNames.value?.[0];
   }
-  visitor.block = item.block ?? ""
-  visitor.level = item.level ?? ""
-  visitor.unit = item.unit ?? ""
+  visitor.block = item.block ?? "";
+  visitor.level = item.level ?? "";
+  visitor.unit = item.unit ?? "";
 
   setTimeout(() => {
     currentAutofillSource.value = null;
   }, 1000);
 }
 
-
-const {
-  data: entryPassSettings,
-  pending: entryPassSettingsPending,
-} = useLazyAsyncData(`fetch-entrypass-settings-${prop.site}`, () =>
-  getEntryPassSettingsBySiteId(prop.site)
-);
+const { data: entryPassSettings, pending: entryPassSettingsPending } =
+  useLazyAsyncData(`fetch-entrypass-settings-${prop.site}`, () =>
+    getEntryPassSettingsBySiteId(prop.site)
+  );
 
 const {
   data: siteData,
@@ -690,18 +991,17 @@ const {
   getSiteById(prop.site)
 );
 
-
 const {
   data: blocksListData,
   refresh: refreshBlockListData,
   status: blocksListStatus,
   pending: blockListDataPending,
-} = useLazyAsyncData(`visitor-fetch-block-list-data-${prop.site}`, () =>
-  getBlocksSelection({ siteId: prop.site }), {watch: [() => prop.site], deep: true }
+} = useLazyAsyncData(
+  `visitor-fetch-block-list-data-${prop.site}`,
+  () => getBlocksSelection({ siteId: prop.site }),
+  { watch: [() => prop.site], deep: true }
 );
 
-
-
 const {
   data: levelsData,
   refresh: refreshLevelsData,
@@ -712,8 +1012,12 @@ const {
   async () => {
     if (!visitor.block) return Promise.resolve(null);
     // return await getSiteWithLevels(prop.site, { block: Number(visitor.block) });
-    return await getLevelsSelection({ siteId: prop.site, blockId: visitor.block });
-  }, { watch: [() => visitor.block], deep: true }
+    return await getLevelsSelection({
+      siteId: prop.site,
+      blockId: visitor.block,
+    });
+  },
+  { watch: [() => visitor.block], deep: true }
 );
 
 const {
@@ -725,20 +1029,26 @@ const {
   `visitor-fetch-units-data-${prop.site}-${visitor.level}`,
   async () => {
     if (!visitor.level) return Promise.resolve(null);
-    return await getUnitSelection({ siteId: prop.site, block: visitor.block, level: visitor.level });
-  },{ watch: [() => visitor.level], deep: true }
+    return await getUnitSelection({
+      siteId: prop.site,
+      block: visitor.block,
+      level: visitor.level,
+    });
+  },
+  { watch: [() => visitor.level], deep: true }
 );
 
-
 watch(
   siteData,
   (newVal) => {
     const siteDataValue = newVal as TSite;
     if (siteDataValue) {
-
-      deliveryCompanyList.value = Array.isArray(siteDataValue?.deliveryCompanyList) ? siteDataValue.deliveryCompanyList : [];
-
-    } 
+      deliveryCompanyList.value = Array.isArray(
+        siteDataValue?.deliveryCompanyList
+      )
+        ? siteDataValue.deliveryCompanyList
+        : [];
+    }
   },
   { immediate: true }
 );
@@ -746,83 +1056,96 @@ watch(
 watch(
   [blocksListData],
   () => {
-    if (blocksListStatus.value === 'pending') {
+    if (blocksListStatus.value === "pending") {
       blocksArray.value = [];
       return;
     }
 
-    const arr = Array.isArray(blocksListData.value?.data) ? blocksListData.value?.data : [];
+    const arr = Array.isArray(blocksListData.value?.data)
+      ? blocksListData.value?.data
+      : [];
     blocksArray.value = arr.map((block: any) => ({
       title: block.name,
       value: block._id,
     }));
   },
   { immediate: true, deep: true }
-)
-
+);
 
-watch([levelsData], () => {
-  if (levelsStatus.value === 'pending') {
-    levelsArray.value = [];
-    return;
-  }
+watch(
+  [levelsData],
+  () => {
+    if (levelsStatus.value === "pending") {
+      levelsArray.value = [];
+      return;
+    }
 
-  const arr = Array.isArray(levelsData.value?.data) ? levelsData.value?.data : [];
-  const mappedLevels = arr.map((level: any) => ({
-    title: level.name,
-    value: level._id,
-  }));
-  levelsArray.value = mappedLevels;
-}, { immediate: true,  deep: true})
+    const arr = Array.isArray(levelsData.value?.data)
+      ? levelsData.value?.data
+      : [];
+    const mappedLevels = arr.map((level: any) => ({
+      title: level.name,
+      value: level._id,
+    }));
+    levelsArray.value = mappedLevels;
+  },
+  { immediate: true, deep: true }
+);
 
 watch(
   unitsData,
   (newVal: any) => {
     if (!newVal || !Array.isArray(newVal)) {
-      unitsArray.value = []
-      return
+      unitsArray.value = [];
+      return;
     }
 
     const mapped = newVal.map((unit: any) => ({
       title: unit.name,
       value: unit._id,
-    }))
+    }));
 
     // keep custom unit pushed from autofill
-    const selected = visitor.unit
-    const exists = mapped.some((u: TDefaultOptionObj) => u.value === selected)
+    const selected = visitor.unit;
+    const exists = mapped.some((u: TDefaultOptionObj) => u.value === selected);
 
     if (!exists && visitor.unitName) {
       mapped.push({
         title: visitor.unitName,
         value: selected,
-      })
+      });
     }
 
-    unitsArray.value = mapped
+    unitsArray.value = mapped;
   },
   { immediate: true, deep: true }
-)
-
+);
 
-const { data: buildingUnitData, refresh: refreshBuildingUnitData, pending: buildingUnitDataPending } = useLazyAsyncData(`building-unit-data-${visitor.unit}`, () => {
+const {
+  data: buildingUnitData,
+  refresh: refreshBuildingUnitData,
+  pending: buildingUnitDataPending,
+} = useLazyAsyncData(`building-unit-data-${visitor.unit}`, () => {
   if (!visitor.unit) return Promise.resolve(null);
   return getUnitDataById(visitor.unit);
-})
+});
 
 // trigger refresh of building unit data when unit changes, to get the latest unit name in case there are changes in the backend
-watch(() => visitor.unit, () => {
-  if (visitor.unit) {
-    refreshBuildingUnitData();
-  } else {
-    registeredUnitCompanyName.value = 'N/A';
+watch(
+  () => visitor.unit,
+  () => {
+    if (visitor.unit) {
+      refreshBuildingUnitData();
+    } else {
+      registeredUnitCompanyName.value = "N/A";
+    }
   }
-})
+);
 
 watch(buildingUnitData, (newVal: any) => {
-  registeredUnitCompanyName.value = newVal?.data?.buildingUnit?.companyName || 'N/A';
-})
-
+  registeredUnitCompanyName.value =
+    newVal?.data?.buildingUnit?.companyName || "N/A";
+});
 
 function handleChangeBlock(value: any) {
   visitor.level = "";
@@ -839,17 +1162,19 @@ function handleUpdateUnit(value: any) {
   visitor.unitName = selectedUnit?.title || "";
 }
 
-const debounceFetchNRIC = debounce(fetchPersonByNRICRefresh, 500)
-const debounceFetchContact = debounce(fetchPersonByContactRefresh, 500)
+const debounceFetchNRIC = debounce(fetchPersonByNRICRefresh, 500);
+const debounceFetchContact = debounce(fetchPersonByContactRefresh, 500);
 
 function handleUpdateNRIC() {
-  if (currentAutofillSource.value && currentAutofillSource.value !== "nric") return;
-  debounceFetchNRIC()
+  if (currentAutofillSource.value && currentAutofillSource.value !== "nric")
+    return;
+  debounceFetchNRIC();
 }
 
 function handleUpdateContact() {
-  if (currentAutofillSource.value && currentAutofillSource.value !== "contact") return;
-  debounceFetchContact()
+  if (currentAutofillSource.value && currentAutofillSource.value !== "contact")
+    return;
+  debounceFetchContact();
 }
 
 function backToSelection() {
@@ -902,12 +1227,20 @@ async function handleNextPage() {
 async function submit() {
   formRef.value!.validate();
   errorMessage.value = "";
+  if (!validForm.value) {
+    errorMessage.value = "Please complete all required fields *";
+    return;
+  }
+
+  if (passType.value === "HID_QR" && !validateHidQrPrinterConfig()) return;
+
   processing.value = true;
 
   let payload: Partial<TVisitorPayload> = {
     type: prop.type,
     org: prop.org,
     site: prop.site,
+    createdBy: prop.currentUser,
   };
 
   if (prop.mode === "add" || prop.mode === "register") {
@@ -928,11 +1261,8 @@ async function submit() {
       payload.visitorPass = visitor.visitorPass;
       payload.passKeys = visitor.passKeys;
     }
-
   }
 
-
-
   if (prop.type === "contractor") {
     // contractor type logic payload
     payload = {
@@ -944,30 +1274,40 @@ async function submit() {
   if (prop.type === "delivery") {
     payload = {
       ...payload,
-      company: deliveryCompany.value
-    }
+      company: deliveryCompany.value,
+    };
   }
 
   // add register status when registering unregistered visitor
-  if (prop.mode === 'register') {
-    payload.status = "registered"
+  if (prop.mode === "register") {
+    payload.status = "registered";
   }
 
   try {
     let res;
     if (prop.mode === "add") {
       res = await createVisitor(payload as TVisitorPayload);
-    } else if ((prop.mode === "edit" || prop.mode === "register") && prop.visitorData?._id) {
-      const { unitName, ...rest } = payload
+    } else if (
+      (prop.mode === "edit" || prop.mode === "register") &&
+      prop.visitorData?._id
+    ) {
+      const { unitName, ...rest } = payload;
       res = await updateVisitor(prop.visitorData._id, rest as TVisitorPayload);
     }
 
     if (res) {
-      if (prop.type === "contractor" && passType.value) {
+      if (passType.value === "HID_QR") {
+        const printed = await printHidQrCodePass(getVisitorIdFromResponse(res), false);
+        if (!printed) return;
+      }
+
+      if (prop.type === "contractor" && (passType.value === "QR" || passType.value === "NFC")) {
         const visitorId = res as unknown as string;
         const rawUrl = entryPassSettings.value?.data?.settings?.url;
         const { encrypted: acmUrl } = await $fetch<{ encrypted: string }>(
-          `/api/encrypt-acm-url${rawUrl ? `?url=${encodeURIComponent(rawUrl)}` : ""}`
+          `/api/encrypt-acm-url${
+            rawUrl ? `?url=${encodeURIComponent(rawUrl)}` : ""
+          }`
         );
         if (visitorId && acmUrl) {
           const passRes = await createVisitorPass({
@@ -982,7 +1322,8 @@ async function submit() {
 
           if (passType.value === "QR") {
             console.log("[QR Print] passRes:", passRes);
-            const accessCards: any[] = (passRes as any)?.data?.accessCards ?? [];
+            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);
@@ -994,23 +1335,57 @@ async function submit() {
               const vendorId = parseInt(printer.vendorId);
               const productId = parseInt(printer.productId);
               const companyName = visitor.company || "";
-              const blockLabel = blocksArray.value.find((b: any) => b.value === visitor.block)?.title || "";
-              const levelLabel = levelsArray.value.find((l: any) => l.value === visitor.level)?.title || "";
-              const unitLabel = unitsArray.value.find((u: any) => u.value === visitor.unit)?.title || "";
-              const address = [blockLabel, levelLabel, unitLabel].filter(Boolean).join("/");
-              console.log("[QR Print] Printing", accessCards.length, "card(s). vendorId:", vendorId, "productId:", productId, "address:", address);
+              const blockLabel =
+                blocksArray.value.find((b: any) => b.value === visitor.block)
+                  ?.title || "";
+              const levelLabel =
+                levelsArray.value.find((l: any) => l.value === visitor.level)
+                  ?.title || "";
+              const unitLabel =
+                unitsArray.value.find((u: any) => u.value === visitor.unit)
+                  ?.title || "";
+              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 signed = await signQr({
+                  cardId: qrCode._id,
+                  purpose: "vms",
+                });
                 const qrData = signed?.data;
-                console.log("[QR Print] signQr result:", signed, "| qrData:", qrData);
+                console.log(
+                  "[QR Print] signQr result:",
+                  signed,
+                  "| qrData:",
+                  qrData
+                );
                 if (!qrData) {
-                  console.warn("[QR Print] Skipping card", qrCode._id, "— signQr returned no data.");
+                  console.warn(
+                    "[QR Print] Skipping card",
+                    qrCode._id,
+                    "— signQr returned no data."
+                  );
                   continue;
                 }
-                console.log("[QR Print] Sending to printer — accessLevel:", qrCode.accessLevel, "liftLevel:", qrCode.liftAccessLevel);
+                console.log(
+                  "[QR Print] Sending to printer — accessLevel:",
+                  qrCode.accessLevel,
+                  "liftLevel:",
+                  qrCode.liftAccessLevel
+                );
                 const printResult = await testConnection(
                   vendorId,
                   productId,
@@ -1019,9 +1394,14 @@ async function submit() {
                   qrCode.accessLevel,
                   qrCode.liftAccessLevel,
                   companyName,
-                  address,
+                  address
+                );
+                console.log(
+                  "[QR Print] Print result for card",
+                  qrCode._id,
+                  ":",
+                  printResult
                 );
-                console.log("[QR Print] Print result for card", qrCode._id, ":", printResult);
               }
             }
           }
@@ -1035,13 +1415,139 @@ async function submit() {
     const err = error?.data?.message;
     errorMessage.value =
       err ||
-      `Failed to ${prop.mode === "add" ? "add" : "update"
+      `Failed to ${
+        prop.mode === "add" ? "add" : "update"
       } visitor. Please try again.`;
   } finally {
     processing.value = false;
   }
 }
 
+function parseUsbId(value: unknown) {
+  if (typeof value === "number") return value;
+  const text = String(value || "").trim();
+  if (!text) return NaN;
+  return text.toLowerCase().startsWith("0x")
+    ? parseInt(text, 16)
+    : parseInt(text, 10);
+}
+
+function getVisitorIdFromResponse(response: any) {
+  if (typeof response === "string") return response;
+  return (
+    response?._id ||
+    response?.id ||
+    response?.data?._id ||
+    response?.data?.id ||
+    response?.insertedId ||
+    response?.data?.insertedId ||
+    ""
+  );
+}
+
+function getHidQrPrinterUsbIds() {
+  const vendorId = parseUsbId(hidQrPrinterConfig.value.vendorId);
+  const productId = parseUsbId(hidQrPrinterConfig.value.productId);
+  return { vendorId, productId };
+}
+
+function validateHidQrPrinterConfig() {
+  if (!hasHidQrPrinterConfig.value) {
+    errorMessage.value = "No printer is configured on HID settings. Please configure the HID QR Code printer before continuing.";
+    return false;
+  }
+
+  const { vendorId, productId } = getHidQrPrinterUsbIds();
+
+  if (!Number.isFinite(vendorId) || !Number.isFinite(productId)) {
+    errorMessage.value = "Invalid HID QR Code printer configuration. Please check Vendor and Product ID in Settings.";
+    return false;
+  }
+
+  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 || "";
+  const levelLabel = levelsArray.value.find((l: any) => l.value === visitor.level)?.title || "";
+  const unitLabel = unitsArray.value.find((u: any) => u.value === visitor.unit)?.title || visitor.unitName || "";
+  return [blockLabel, levelLabel, unitLabel].filter(Boolean).join("/");
+}
+
+async function printHidQrCodePass(visitorId = "", manageProcessing = true) {
+  if (hidQrPrinted.value) return true;
+
+  if (!validateHidQrPrinterConfig()) return false;
+
+  const { vendorId, productId } = getHidQrPrinterUsbIds();
+
+  if (manageProcessing) processing.value = true;
+  try {
+    const printResult = await testConnection(
+      vendorId,
+      productId,
+      true,
+      buildHidQrCodePayload(visitorId),
+      null,
+      null,
+      visitor.company || visitor.name || "",
+      buildVisitorAddress(),
+      hidQrTemplate.value?.header || "HID QR Code",
+      hidQrTemplate.value?.subtext || "Scan QR code for access",
+    );
+
+    if (!printResult?.success || printResult?.printTest?.success === false) {
+      errorMessage.value =
+        printResult?.printTest?.error ||
+        printResult?.error ||
+        "Unable to print HID QR Code. Please check the printer connection.";
+      return false;
+    }
+
+    hidQrPrinted.value = true;
+    return true;
+  } catch (error: any) {
+    errorMessage.value = error?.message || "Unable to print HID QR Code.";
+    return false;
+  } finally {
+    if (manageProcessing) processing.value = false;
+  }
+}
+
 watch(
   () => visitor.plateNumber,
   (newVal) => {
@@ -1049,6 +1555,22 @@ watch(
   }
 );
 
+watch(
+  [
+    () => passType.value,
+    () => visitor.name,
+    () => visitor.company,
+    () => visitor.block,
+    () => visitor.level,
+    () => visitor.unit,
+    () => visitor.unitName,
+  ],
+  () => {
+    hidQrPrintPayload.value = null;
+    hidQrPrinted.value = false;
+  }
+);
+
 const membersFieldIncomplete = computed(() => {
   if (!visitor.members || visitor.members.length === 0) return false;
 
@@ -1065,9 +1587,12 @@ onMounted(() => {
   contractorStep.value = 1;
   currentAutofillSource.value = null;
 
-  if (prop.mode === 'register' && prop.visitorData) {
-    console.log('Register mode, prefill visitor data', prop.visitorData?.plateNumber)
-    visitor.plateNumber = prop.visitorData?.plateNumber || ""
+  if (prop.mode === "register" && prop.visitorData) {
+    console.log(
+      "Register mode, prefill visitor data",
+      prop.visitorData?.plateNumber
+    );
+    visitor.plateNumber = prop.visitorData?.plateNumber || "";
   }
 });
 </script>