@7365admin1/layer-common 3.2.2-staging.83 → 3.2.2-staging.85

package/components/HidIntercomManagement.vue

@@ -338,10 +338,10 @@
         <v-card-title class="dialog-title">Make a Call</v-card-title>
         <v-card-text class="dialog-body make-call-body">
           <div class="make-call-field">
-            <div class="call-label">IP address to dial</div>
+            <div class="call-label">Extension, SIP address, or peer IP</div>
             <v-text-field
               v-model="makeCallForm.target"
-              placeholder="000.000.0.0"
+              placeholder="7100 or user@example.com"
               variant="outlined"
               density="compact"
               hide-details="auto"
@@ -385,9 +385,19 @@
       <v-card class="web-phone-dialog" rounded="lg">
         <v-card-title class="dialog-title web-phone-title">
           <span>Web Call</span>
-          <v-chip size="small" variant="flat" :class="webPhoneStatusClass">
-            {{ webPhoneStatusLabel }}
-          </v-chip>
+          <div class="web-phone-title-actions">
+            <v-chip size="small" variant="flat" :class="webPhoneStatusClass">
+              {{ webPhoneStatusLabel }}
+            </v-chip>
+            <v-btn
+              icon="mdi-close"
+              size="small"
+              variant="text"
+              title="Close Web Call"
+              aria-label="Close Web Call"
+              @click="webPhoneDialog = false"
+            />
+          </div>
         </v-card-title>
 
         <v-card-text class="web-phone-body">
@@ -547,11 +557,6 @@
           </div>
         </v-card-text>
 
-        <v-card-actions class="dialog-actions pa-0">
-          <v-btn class="text-none action-submit full-action" variant="flat" height="44" @click="webPhoneDialog = false">
-            Close
-          </v-btn>
-        </v-card-actions>
       </v-card>
     </v-dialog>
 
@@ -1184,12 +1189,18 @@ function openDialCodeDialog(row: IntercomRow) {
   dialCodeDialog.value = true;
 }
 
-function openMakeCallDialog(row: IntercomRow) {
+async function openMakeCallDialog(row: IntercomRow) {
   selectedRow.value = row;
-  makeCallForm.target = isIpAddress(row.serverAddress) ? row.serverAddress : "";
+  makeCallForm.target = sipAccount.value?.extension || "";
   makeCallForm.status = "";
   makeCallForm.statusType = "info";
   makeCallDialog.value = true;
+  if (!sipAccount.value && !sipAccountLoading.value) {
+    await loadSipAccount();
+    if (makeCallDialog.value && !makeCallForm.target) {
+      makeCallForm.target = sipAccount.value?.extension || "";
+    }
+  }
 }
 
 function openWebPhoneDialog(row?: IntercomRow) {
@@ -1397,13 +1408,13 @@ async function runMakeCall() {
   if (!selectedRow.value) return;
   const target = makeCallForm.target.trim();
   if (!target) {
-    makeCallForm.status = "Please enter an IP address to dial.";
+    makeCallForm.status = "Please enter an extension, SIP address, or peer IP.";
     makeCallForm.statusType = "warning";
     return;
   }
 
-  if (!isIpAddress(target)) {
-    makeCallForm.status = "Address to dial must be an IP address.";
+  if (!isSipCallTarget(target)) {
+    makeCallForm.status = "Enter a valid extension, SIP address, or IPv4 address.";
     makeCallForm.statusType = "warning";
     return;
   }
@@ -1425,13 +1436,8 @@ async function runMakeCall() {
   }
 }
 
-function isIpAddress(value = "") {
-  const parts = value.trim().split(".");
-  return parts.length === 4 && parts.every((part) => {
-    if (!/^\d{1,3}$/.test(part)) return false;
-    const value = Number(part);
-    return value >= 0 && value <= 255;
-  });
+function isSipCallTarget(value = "") {
+  return /^(?:sip:)?[A-Za-z0-9_.+-]+(?:@[A-Za-z0-9.-]+(?::\d{1,5})?)?$/.test(value.trim());
 }
 
 async function runHangupCall() {
@@ -2273,19 +2279,29 @@ export default {
 }
 
 .web-phone-dialog {
+  display: flex;
   width: 820px;
+  max-height: min(90vh, 760px);
   max-width: 94vw;
   overflow: hidden;
   background: #fff;
+  flex-direction: column;
 }
 
 .web-phone-title {
+  flex: 0 0 auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
 }
 
+.web-phone-title-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .web-phone-status {
   min-width: 92px;
   justify-content: center;
@@ -2317,6 +2333,7 @@ export default {
   grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr);
   gap: 24px;
   min-height: 440px;
+  overflow: auto;
   padding: 22px 24px 24px;
 }
 
@@ -2668,8 +2685,7 @@ export default {
 
   .web-phone-body {
     grid-template-columns: minmax(0, 1fr);
-    max-height: 78vh;
-    overflow: auto;
+    min-height: 0;
   }
 
   .web-phone-settings {

package/components/HidQrCodeConfiguration.vue

@@ -583,7 +583,7 @@ async function loadConfig() {
     enabled: Boolean(config.enabled),
     onlineMode: Boolean(config.onlineMode),
     readerId: String(config.readerId || readers.value[0]?._id || ""),
-    qrFormat: ["0", "1", "2"].includes(String(config.qrFormat)) ? String(config.qrFormat) as "0" | "1" | "2" : "0",
+    qrFormat: "0",
     identificationMethods: {
       facial: configuredMethods?.facial ?? true,
       card: configuredMethods?.card ?? true,
@@ -750,13 +750,20 @@ async function loadReaderConfiguration() {
   try {
     const response = await getReaderConfiguration(form.readerId, {
       general: ["online"],
+      identifier: ["pin_identification_enabled", "multi_factor_authentication"],
     });
     const configuration = getConfigurationData(response);
     const general = isUnknownRecord(configuration.general) ? configuration.general : {};
+    const identifier = isUnknownRecord(configuration.identifier) ? configuration.identifier : {};
 
     if (general.online !== undefined) {
       form.onlineMode = isEnabledConfiguration(general.online);
     }
+    if (identifier.pin_identification_enabled !== undefined) {
+      const pinEnabled = isEnabledConfiguration(identifier.pin_identification_enabled);
+      form.identificationMethods.pin = pinEnabled;
+      form.identificationMethods.idPassword = !pinEnabled;
+    }
   } catch (error: unknown) {
     console.warn("Unable to load HID reader configuration:", errorConverter(error));
   }
@@ -769,7 +776,8 @@ function buildPayload() {
       enabled: form.identificationMethods.qrCode,
       onlineMode: form.onlineMode,
       readerId: form.readerId,
-      qrFormat: form.qrFormat,
+      // Visitor QR passes always use Amico alphanumeric qrcodes.
+      qrFormat: "0",
       identificationMethods: { ...form.identificationMethods },
       printer: {
         vendorId: form.printer.vendorId.trim(),
@@ -827,6 +835,20 @@ async function saveIdentificationMethod(method: HidIdentificationMethod) {
 
   savingSection.value = `method-${method}`;
   try {
+    if (method === "pin" || method === "idPassword") {
+      if (method === "pin" && form.identificationMethods.pin) {
+        form.identificationMethods.idPassword = false;
+      } else if (method === "idPassword" && form.identificationMethods.idPassword) {
+        form.identificationMethods.pin = false;
+      }
+      await setReaderConfiguration(form.readerId, {
+        identifier: {
+          pin_identification_enabled: form.identificationMethods.pin ? "1" : "0",
+          // Mode 1: PIN is an alternative credential, never a second factor.
+          multi_factor_authentication: "0",
+        },
+      });
+    }
     await updateSitebyId(props.site, buildPayload());
     showMessage(`${identificationMethodOptions.find((item) => item.key === method)?.label || "Identification method"} updated.`, "success");
   } catch (error: unknown) {

package/components/HidUserEnrollment.vue

@@ -238,28 +238,28 @@
             class="mb-3"
           />
 
-          <div class="field-label">Panic Pin (optional)</div>
+          <div class="field-label">Access PIN (optional)</div>
           <v-text-field
-            v-model="form.cardNo"
-            aria-label="Panic Pin"
-            placeholder="Enter panic pin"
+            v-model="form.accessPin"
+            aria-label="Access PIN"
+            placeholder="Enter numeric access PIN"
             density="compact"
             variant="outlined"
-            hide-details="auto"
+            inputmode="numeric"
+            autocomplete="new-password"
+            :type="showPin ? 'text' : 'password'"
+            :append-inner-icon="showPin ? 'mdi-eye-off' : 'mdi-eye'"
+            :hint="selectedUser && pinEnrolled ? 'Leave blank to keep the current PIN.' : 'PIN works as an alternative to face or QR.'"
+            persistent-hint
+            @click:append-inner="showPin = !showPin"
             class="mb-3"
           />
-
-          <div class="field-label">Panic Password (optional)</div>
-          <v-text-field
-            v-model="form.pinPassword"
-            aria-label="Panic Password"
-            placeholder="Enter password"
+          <v-checkbox
+            v-if="selectedUser && pinEnrolled"
+            v-model="removePinRequested"
+            label="Remove current access PIN"
             density="compact"
-            variant="outlined"
-            hide-details="auto"
-            :type="showPassword ? 'text' : 'password'"
-            :append-inner-icon="showPassword ? 'mdi-eye-off' : 'mdi-eye'"
-            @click:append-inner="showPassword = !showPassword"
+            hide-details
           />
         </v-card-text>
 
@@ -306,12 +306,8 @@
             ><strong>{{
               selectedUser ? getMappingStatus(selectedUser) : "N/A"
             }}</strong>
-            <span>Panic Pin</span
-            ><strong>{{ selectedUser?.cardNo || "N/A" }}</strong>
-            <span>Private Password</span
-            ><strong>{{
-              selectedUser?.metadata?.pinPassword ? "********" : "N/A"
-            }}</strong>
+            <span>Access PIN</span
+            ><strong>{{ selectedUser?.metadata?.pinEnrolled ? "Configured" : "N/A" }}</strong>
           </div>
         </v-card-text>
         <v-card-actions>
@@ -377,6 +373,9 @@ const {
   getUserImage,
   setUserImage,
   deleteUserImage,
+  getUserPinStatus,
+  setUserPin,
+  deleteUserPin,
   runObjectOperation,
   createIdentity,
   updateIdentity,
@@ -401,11 +400,13 @@ const formDialog = ref(false);
 const viewDialog = ref(false);
 const deleteDialog = ref(false);
 const selectedUser = ref<Record<string, any> | null>(null);
-const showPassword = ref(false);
+const showPin = ref(false);
+const pinEnrolled = ref(false);
 const photoInput = ref<HTMLInputElement | null>(null);
 const cameraDialog = ref(false);
 const selectedPhotoFile = ref<File | null>(null);
 const removePhotoRequested = ref(false);
+const removePinRequested = ref(false);
 const snackbar = reactive({
   show: false,
   color: "success",
@@ -420,8 +421,7 @@ const form = reactive({
   name: "",
   hidUserId: "",
   registration: "",
-  cardNo: "",
-  pinPassword: "",
+  accessPin: "",
   photoPreview: "",
 });
 
@@ -554,8 +554,10 @@ function resetForm() {
   form.name = "";
   form.hidUserId = "";
   form.registration = "";
-  form.cardNo = "";
-  form.pinPassword = "";
+  form.accessPin = "";
+  pinEnrolled.value = false;
+  showPin.value = false;
+  removePinRequested.value = false;
   form.photoPreview = "";
   selectedPhotoFile.value = null;
   removePhotoRequested.value = false;
@@ -582,13 +584,24 @@ async function openEdit(user: Record<string, any>) {
   form.name = getName(user);
   form.hidUserId = formatHidUid(user.hidUserId);
   form.registration = user.registration ?? "";
-  form.cardNo = user.cardNo ?? "";
-  form.pinPassword = user.metadata?.pinPassword ?? "";
+  form.accessPin = "";
+  pinEnrolled.value = Boolean(user.metadata?.pinEnrolled);
+  removePinRequested.value = false;
   form.photoPreview = getUserImageSrc(user);
   selectedPhotoFile.value = null;
   removePhotoRequested.value = false;
   formDialog.value = true;
 
+  try {
+    const status = await getUserPinStatus(
+      form.reader,
+      toHidNumericId(user.hidUserId),
+    );
+    pinEnrolled.value = Boolean(status?.data?.pinEnrolled);
+  } catch {
+    // Preserve the last known status if the reader is temporarily offline.
+  }
+
   if (!form.photoPreview) {
     await loadUserImages([user]);
     if (selectedUser.value?._rowKey === user._rowKey) {
@@ -672,6 +685,10 @@ async function saveUser() {
     showToast("Please complete the required HID user fields.", "error");
     return;
   }
+  if (form.accessPin && !/^\d{1,32}$/.test(form.accessPin)) {
+    showToast("Access PIN must contain numbers only.", "error");
+    return;
+  }
 
   saving.value = true;
   try {
@@ -688,7 +705,6 @@ async function saveUser() {
     const payload = {
       hidUserId: String(hidUser.id),
       registration: form.registration,
-      cardNo: form.cardNo,
       type: props.identityType as
         | "resident"
         | "staff"
@@ -707,7 +723,7 @@ async function saveUser() {
         photo: form.photoPreview,
         imageTimestamp: selectedUser.value?.metadata?.imageTimestamp || "",
         facialScores: selectedUser.value?.metadata?.facialScores || {},
-        pinPassword: form.pinPassword,
+        pinEnrolled: pinEnrolled.value,
       },
     };
 
@@ -716,6 +732,7 @@ async function saveUser() {
       await syncHidUserRole(readerId, hidUser.id, isAdministratorIdentity());
       const facialResult = await syncFacialImage(readerId, hidUser.id);
       applyFacialResult(payload.metadata, facialResult);
+      payload.metadata.pinEnrolled = await syncAccessPin(readerId, hidUser.id);
       if (selectedUser.value._id) {
         await updateIdentity(selectedUser.value._id, payload);
       } else {
@@ -726,6 +743,7 @@ async function saveUser() {
       await syncHidUserRole(readerId, hidUser.id, isAdministratorIdentity());
       const facialResult = await syncFacialImage(readerId, hidUser.id);
       applyFacialResult(payload.metadata, facialResult);
+      payload.metadata.pinEnrolled = await syncAccessPin(readerId, hidUser.id);
       await saveIdentityOnReader(readerId, payload);
       selectedReaderId.value = readerId;
     }
@@ -745,6 +763,21 @@ async function saveUser() {
   }
 }
 
+async function syncAccessPin(readerId: string, hidUserId: number) {
+  if (removePinRequested.value) {
+    await deleteUserPin(readerId, hidUserId);
+    pinEnrolled.value = false;
+    return false;
+  }
+  if (form.accessPin) {
+    await setUserPin(readerId, hidUserId, form.accessPin);
+    form.accessPin = "";
+    pinEnrolled.value = true;
+    return true;
+  }
+  return pinEnrolled.value;
+}
+
 type FacialSyncResult = {
   action: "none" | "enrolled" | "removed";
   timestamp?: number;
@@ -806,6 +839,10 @@ async function deleteUser() {
       toHidNumericId(selectedUser.value.hidUserId),
       false
     );
+    await deleteUserPin(
+      selectedReaderId.value,
+      toHidNumericId(selectedUser.value.hidUserId),
+    );
     await deleteHidUserFromReader(selectedReaderId.value, selectedUser.value);
     if (selectedUser.value._id) {
       await deleteIdentity(selectedUser.value._id);

package/components/RolePermissionMain.vue

@@ -105,42 +105,90 @@
       />
     </v-dialog>
 
-    <ConfirmDialog
-      v-model="confirmDialog"
-      :loading="deleteLoading"
-      @submit="handleDeleteRole"
-    >
-      <template #title>
-        <span class="font-weight-medium text-h5">Delete Role</span>
-      </template>
-
-      <template #description>
-        <p class="text-subtitle-2">
-          Are you sure you want to delete this role? This action cannot be
-          undone.
-        </p>
-      </template>
-
-      <template #footer>
-        <div class="d-flex justify-center ga-3 w-100">
-          <v-btn
-            variant="text"
-            @click="confirmDialog = false"
-            :disabled="deleteLoading"
-          >
-            Close
-          </v-btn>
-          <v-btn
-            color="primary"
-            variant="flat"
-            @click="handleDeleteRole"
-            :loading="deleteLoading"
-          >
-            Delete Role
-          </v-btn>
-        </div>
-      </template>
-    </ConfirmDialog>
+    <v-dialog v-model="confirmDialog" max-width="450">
+      <v-card>
+        <v-toolbar>
+          <v-row no-gutters class="fill-height px-6" align="center">
+            <span class="font-weight-bold text-h6 text-capitalize">
+              Delete Role
+            </span>
+          </v-row>
+        </v-toolbar>
+
+        <v-card-text>
+          <span v-if="!hasAssignedMembers" class="text-subtitle-2">
+            Are you sure you want to delete this role? This action cannot be
+            undone.
+          </span>
+          <template v-else>
+            <p class="text-subtitle-2 mb-4">
+            There are currently
+            <span class="text-error font-weight-bold">
+              {{ deletionPreview.members.length }}
+              {{ deletionPreview.members.length === 1 ? "user" : "users" }}
+            </span>
+            assigned to this role. Reassign each user before deleting it so
+            they do not lose access.
+          </p>
+
+            <v-row
+              v-for="member in deletionPreview.members"
+              :key="member._id"
+              no-gutters
+              class="mb-3 pa-3 border rounded-lg"
+              align="center"
+            >
+              <v-col cols="12" sm="5" class="text-body-2 mb-2 mb-sm-0">
+                {{ member.name || member.user }}
+              </v-col>
+              <v-col cols="12" sm="7">
+                <v-select
+                  v-model="memberReassignments[member._id]"
+                  :items="deletionPreview.replacementRoles"
+                  item-title="name"
+                  item-value="_id"
+                  label="Reassign role"
+                  density="comfortable"
+                  hide-details
+                />
+              </v-col>
+            </v-row>
+          </template>
+        </v-card-text>
+
+        <v-toolbar class="pa-0" density="compact">
+          <v-row no-gutters>
+            <v-col cols="6" class="pa-0">
+              <v-btn
+                block
+                variant="text"
+                class="text-none"
+                size="large"
+                height="48"
+                @click="closeDeleteDialog"
+                :disabled="deleteLoading"
+              >
+                Cancel
+              </v-btn>
+            </v-col>
+            <v-col cols="6" class="pa-0">
+              <v-btn
+                block
+                variant="flat"
+                color="black"
+                class="text-none font-weight-bold rounded-0"
+                height="48"
+                @click="handleDeleteRole"
+                :loading="deleteLoading"
+                :disabled="hasAssignedMembers && !canConfirmDeletion"
+              >
+                {{ hasAssignedMembers ? "Confirm" : "Delete" }}
+              </v-btn>
+            </v-col>
+          </v-row>
+        </v-toolbar>
+      </v-card>
+    </v-dialog>
 
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
   </v-row>
@@ -367,10 +415,49 @@ async function refreshRolesAfterUpdate(savedPermissions: string[]) {
 const confirmDialog = ref(false);
 const selectedRoleId = ref<string | null>(null);
 const deleteLoading = ref(false);
+const deletionPreview = ref({
+  members: [] as Array<Record<string, any>>,
+  replacementRoles: [] as Array<Record<string, any>>,
+});
+const memberReassignments = ref<Record<string, string>>({});
+
+const hasAssignedMembers = computed(
+  () => deletionPreview.value.members.length > 0
+);
+
+const canConfirmDeletion = computed(() =>
+  deletionPreview.value.members.every(
+    (member) => Boolean(memberReassignments.value[member._id])
+  )
+);
 
-function openDeleteDialog(id: string) {
+const { getDeletionPreview, deleteWithReassignments } = useRole();
+
+async function openDeleteDialog(id: string) {
   selectedRoleId.value = id;
-  confirmDialog.value = true;
+  deletionPreview.value = { members: [], replacementRoles: [] };
+  memberReassignments.value = {};
+  deleteLoading.value = true;
+
+  try {
+    const res = await getDeletionPreview(id);
+    deletionPreview.value = res.data;
+    confirmDialog.value = true;
+  } catch (error: any) {
+    const errorMessage =
+      error?.response?._data?.message || "Failed to load role assignments.";
+    showMessage(errorMessage, "error");
+    selectedRoleId.value = null;
+  } finally {
+    deleteLoading.value = false;
+  }
+}
+
+function closeDeleteDialog() {
+  confirmDialog.value = false;
+  selectedRoleId.value = null;
+  deletionPreview.value = { members: [], replacementRoles: [] };
+  memberReassignments.value = {};
 }
 
 function showMessage(msg: string, color: string) {
@@ -383,17 +470,23 @@ async function handleDeleteRole() {
   if (!selectedRoleId.value) return;
   deleteLoading.value = true;
   try {
-    const res = await deleteRole(selectedRoleId.value);
-
-    confirmDialog.value = false;
+    const reassignments = deletionPreview.value.members.map((member) => ({
+      memberId: member._id,
+      roleId: memberReassignments.value[member._id],
+    }));
+    const res = hasAssignedMembers.value
+      ? await deleteWithReassignments(selectedRoleId.value, reassignments)
+      : await deleteRole(selectedRoleId.value);
+
+    closeDeleteDialog();
     showMessage(res.message, "success");
     getRoles();
   } catch (error: any) {
-    const errorMessage = error?.response?._data?.message;
+    const errorMessage =
+      error?.response?._data?.message || "Failed to delete role.";
     showMessage(errorMessage, "error");
   } finally {
     deleteLoading.value = false;
-    selectedRoleId.value = null;
   }
 }
 </script>

package/components/VisitorForm.vue

@@ -515,13 +515,49 @@
           </div>
 
           <div class="hid-qr-image-shell my-5">
-            <v-img :src="hidQrPreview.imageUrl" width="280" height="280" alt="Visitor access QR code" />
+            <v-img v-if="hidQrVisible" :src="hidQrPreview.imageUrl" width="280" height="280" alt="Visitor access QR code" />
+            <button v-else type="button" class="hid-qr-reveal" aria-label="Show QR code" @click="hidQrVisible = true">
+              <v-icon icon="mdi-eye-outline" size="42" />
+              <span>Click to show QR code</span>
+            </button>
           </div>
 
+          <v-btn
+            variant="text"
+            density="comfortable"
+            class="text-none"
+            :prepend-icon="hidQrVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
+            @click="hidQrVisible = !hidQrVisible"
+          >
+            {{ hidQrVisible ? "Hide QR code" : "Show QR code" }}
+          </v-btn>
+
           <div class="text-h6 font-weight-bold">{{ visitor.name }}</div>
           <div v-if="hidQrPreview.expiresAt" class="text-caption text-medium-emphasis mt-1">
             Valid until {{ formatHidQrExpiry(hidQrPreview.expiresAt) }}
           </div>
+          <v-chip
+            v-if="hidQrPreview.expiresAt"
+            class="mt-2"
+            size="small"
+            :color="hidQrExpired ? 'error' : 'success'"
+            variant="tonal"
+          >
+            {{ hidQrExpired ? "Expired" : `Expires in ${formatHidQrCountdown(hidQrRemainingSeconds)}` }}
+          </v-chip>
+
+          <v-btn
+            v-if="hidQrExpired"
+            block
+            class="mt-4 text-none"
+            color="primary-button"
+            variant="flat"
+            prepend-icon="mdi-refresh"
+            :loading="hidQrRegenerating"
+            @click="regenerateHidQrCode"
+          >
+            Generate QR again
+          </v-btn>
 
           <v-alert v-if="hidQrPreviewError" type="error" variant="tonal" density="compact" class="mt-4 text-left">
             {{ hidQrPreviewError }}
@@ -684,6 +720,11 @@ const isNricFieldFocused = ref(false);
 const hidQrPrinting = ref(false);
 const hidQrPreviewDialog = ref(false);
 const hidQrPreviewError = ref("");
+const hidQrVisible = ref(false);
+const hidQrRegenerating = ref(false);
+const hidQrVisitorId = ref("");
+const hidQrNow = ref(Date.now());
+let hidQrTimer: ReturnType<typeof setInterval> | null = null;
 const hidQrPendingCompletion = ref<"done" | "done:more" | null>(null);
 const hidQrPreview = reactive({
   imageUrl: "",
@@ -691,6 +732,24 @@ const hidQrPreview = reactive({
   expiresAt: "",
 });
 
+const hidQrRemainingSeconds = computed(() => {
+  const expiry = new Date(hidQrPreview.expiresAt).getTime();
+  return Number.isFinite(expiry) ? Math.max(0, Math.ceil((expiry - hidQrNow.value) / 1000)) : 0;
+});
+const hidQrExpired = computed(() => Boolean(hidQrPreview.expiresAt) && hidQrRemainingSeconds.value === 0);
+
+watch(hidQrPreviewDialog, (open) => {
+  if (hidQrTimer) clearInterval(hidQrTimer);
+  hidQrTimer = null;
+  if (!open) return;
+  hidQrNow.value = Date.now();
+  hidQrTimer = setInterval(() => { hidQrNow.value = Date.now(); }, 1000);
+});
+
+onBeforeUnmount(() => {
+  if (hidQrTimer) clearInterval(hidQrTimer);
+});
+
 const registeredUnitCompanyName = ref("N/A");
 
 const dialog = reactive({
@@ -818,10 +877,6 @@ const hidQrValidityMinutes = computed(() => {
 });
 
 const hidQrReaderId = computed(() => String(hidQrCodePassConfig.value?.readerId || ""));
-const hidQrFormat = computed<"0" | "1" | "2">(() => {
-  const value = String(hidQrCodePassConfig.value?.qrFormat || "0");
-  return value === "1" || value === "2" ? value : "0";
-});
 
 const hidQrCodePassAllowed = computed(() => {
   return (
@@ -2088,10 +2143,10 @@ async function prepareHidQrCodePreview(visitorId: string) {
   }
 
   try {
+    hidQrVisitorId.value = visitorId;
     const response = await issueVisitorQr(hidQrReaderId.value, {
       visitorId,
       validityMinutes: hidQrValidityMinutes.value,
-      qrFormat: hidQrFormat.value,
     });
     const credential = "data" in response ? response.data : response;
     hidQrPrintPayload.value = credential.qrValue;
@@ -2107,14 +2162,37 @@ async function prepareHidQrCodePreview(visitorId: string) {
     });
     hidQrPreview.issuedAt = credential.issuedAt || "";
     hidQrPreview.expiresAt = credential.expiresAt || "";
+    hidQrVisible.value = false;
+    hidQrNow.value = Date.now();
     hidQrPreviewDialog.value = true;
     return true;
   } catch (error: unknown) {
-    errorMessage.value = errorConverter(error) || "Unable to generate HID QR Code.";
+    const message = errorConverter(error) || "Unable to generate HID QR Code.";
+    if (hidQrPreviewDialog.value) hidQrPreviewError.value = message;
+    else errorMessage.value = message;
     return false;
   }
 }
 
+function formatHidQrCountdown(totalSeconds: number) {
+  const safe = Math.max(0, totalSeconds);
+  const hours = Math.floor(safe / 3600);
+  const minutes = Math.floor((safe % 3600) / 60);
+  const seconds = safe % 60;
+  return [hours, minutes, seconds].map((part) => String(part).padStart(2, "0")).join(":");
+}
+
+async function regenerateHidQrCode() {
+  if (!hidQrVisitorId.value) return;
+  hidQrRegenerating.value = true;
+  hidQrPreviewError.value = "";
+  try {
+    await prepareHidQrCodePreview(hidQrVisitorId.value);
+  } finally {
+    hidQrRegenerating.value = false;
+  }
+}
+
 async function printHidQrCodePass() {
   if (hidQrPrinted.value) return true;
 
@@ -2335,4 +2413,19 @@ onMounted(() => {
   border: 1px solid #dce3e8;
   background: #ffffff;
 }
+
+.hid-qr-reveal {
+  display: flex;
+  width: 280px;
+  height: 280px;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  background: #f5f7f9;
+  color: #344054;
+  cursor: pointer;
+  flex-direction: column;
+  gap: 10px;
+  font: inherit;
+}
 </style>

package/components/VisitorManagement.vue

@@ -303,6 +303,18 @@
             >
           </div>
 
+          <v-btn
+            v-if="hidQrEnabled"
+            icon="mdi-eye-outline"
+            size="x-small"
+            variant="text"
+            color="primary"
+            title="View HID QR code"
+            aria-label="View HID QR code"
+            class="align-self-start mt-1"
+            @click.stop="openVisitorHidQr(item)"
+          />
+
           <v-menu :close-on-content-click="true">
             <template v-slot:activator="{ props: menuProps }">
               <div
@@ -1177,12 +1189,52 @@
       </v-card>
     </v-dialog>
 
+    <v-dialog v-model="hidQrDialog" max-width="440" persistent>
+      <v-card>
+        <v-toolbar color="transparent" density="comfortable" class="px-2">
+          <v-toolbar-title class="text-subtitle-1 font-weight-bold">Visitor QR Code</v-toolbar-title>
+          <v-btn icon="mdi-close" variant="text" title="Close" @click="hidQrDialog = false" />
+        </v-toolbar>
+        <v-card-text class="px-8 pb-6 text-center">
+          <v-progress-circular v-if="hidQrLoading" indeterminate color="primary" class="my-10" />
+          <template v-else-if="hidQrImageUrl">
+            <div class="text-h6 font-weight-bold">{{ hidQrVisitor?.name || "Visitor Access Pass" }}</div>
+            <div class="visitor-hid-qr my-5">
+              <v-img :src="hidQrImageUrl" width="280" height="280" alt="Visitor HID QR code" />
+            </div>
+            <div class="text-caption text-medium-emphasis">
+              Valid until {{ formatHidQrExpiry(hidQrExpiresAt) }}
+            </div>
+            <v-chip class="mt-2" size="small" :color="hidQrExpired ? 'error' : 'success'" variant="tonal">
+              {{ hidQrExpired ? "Expired" : `Expires in ${formatHidQrCountdown(hidQrRemainingSeconds)}` }}
+            </v-chip>
+          </template>
+          <v-alert v-if="hidQrError" type="warning" variant="tonal" density="compact" class="mt-4 text-left">
+            {{ hidQrError }}
+          </v-alert>
+          <v-btn
+            v-if="!hidQrLoading && (!hidQrImageUrl || hidQrExpired)"
+            block
+            color="primary-button"
+            variant="flat"
+            class="mt-4 text-none"
+            prepend-icon="mdi-refresh"
+            :loading="hidQrGenerating"
+            @click="generateVisitorHidQr"
+          >
+            {{ hidQrExpired ? "Generate QR again" : "Generate HID QR code" }}
+          </v-btn>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
   </v-row>
 </template>
 
 <script setup lang="ts">
 import moment from "moment-timezone";
+import QRCode from "qrcode";
 
 definePageMeta({
   middleware: ["01-auth", "02-org"],
@@ -1244,6 +1296,8 @@ const {
 } = useUtils();
 const { formatLocation } = useSecurityUtils();
 const { getFileUrlAnpr } = useFile();
+const { getSiteById } = useSite();
+const { getIdentities, issueVisitorQr } = useHidAmico();
 // const { status: visitorStatus, search } = useRoute().query as { status: string, search: string};
 
 const routeName = route.name;
@@ -1255,6 +1309,106 @@ const pageRange = ref("-- - -- of --");
 const activeTab = ref("registered");
 const activeVisitorFormType = ref<TVisitorType | null>(null);
 const selectedVisitorId = ref<string | null>(""); // selected visitor for viewing/actions
+const hidQrDialog = ref(false);
+const hidQrLoading = ref(false);
+const hidQrGenerating = ref(false);
+const hidQrError = ref("");
+const hidQrImageUrl = ref("");
+const hidQrExpiresAt = ref("");
+const hidQrNow = ref(Date.now());
+const hidQrVisitor = ref<Record<string, any> | null>(null);
+const hidQrConfig = ref({ enabled: false, readerId: "", validityMinutes: 60 });
+let hidQrTimer: ReturnType<typeof setInterval> | null = null;
+const hidQrEnabled = computed(() => hidQrConfig.value.enabled && Boolean(hidQrConfig.value.readerId));
+const hidQrRemainingSeconds = computed(() => {
+  const expiry = new Date(hidQrExpiresAt.value).getTime();
+  return Number.isFinite(expiry) ? Math.max(0, Math.ceil((expiry - hidQrNow.value) / 1000)) : 0;
+});
+const hidQrExpired = computed(() => Boolean(hidQrExpiresAt.value) && hidQrRemainingSeconds.value === 0);
+
+async function loadHidQrConfig() {
+  try {
+    const response: any = await getSiteById(siteId);
+    const site = response?.data ?? response;
+    const config = site?.metadata?.hidQrCodePass ?? {};
+    hidQrConfig.value = {
+      enabled: Boolean(config.enabled && config.onlineMode !== false),
+      readerId: String(config.readerId || ""),
+      validityMinutes: Number(config.validityMinutes) > 0 ? Number(config.validityMinutes) : 60,
+    };
+  } catch {
+    hidQrConfig.value = { enabled: false, readerId: "", validityMinutes: 60 };
+  }
+}
+
+function extractIdentityItems(response: any) {
+  return response?.items ?? response?.data?.items ?? [];
+}
+
+async function openVisitorHidQr(visitor: Record<string, any>) {
+  hidQrVisitor.value = visitor;
+  hidQrDialog.value = true;
+  hidQrLoading.value = true;
+  hidQrError.value = "";
+  hidQrImageUrl.value = "";
+  hidQrExpiresAt.value = "";
+  try {
+    const response = await getIdentities(hidQrConfig.value.readerId, { type: "visitor", limit: 100 });
+    const identity = extractIdentityItems(response).find(
+      (item: any) => String(item.visitor || item.metadata?.visitor || "") === String(visitor._id),
+    );
+    const qrValue = String(identity?.metadata?.qrValue || identity?.cardNo || "");
+    hidQrExpiresAt.value = String(identity?.metadata?.expiresAt || "");
+    if (!qrValue || !hidQrExpiresAt.value) {
+      hidQrError.value = "This visitor does not have an HID QR code yet.";
+      return;
+    }
+    hidQrImageUrl.value = await QRCode.toDataURL(qrValue, { width: 360, margin: 2, errorCorrectionLevel: "M" });
+    hidQrNow.value = Date.now();
+  } catch (error: unknown) {
+    hidQrError.value = errorConverter(error) || "Unable to load the visitor HID QR code.";
+  } finally {
+    hidQrLoading.value = false;
+  }
+}
+
+async function generateVisitorHidQr() {
+  if (!hidQrVisitor.value?._id || !hidQrConfig.value.readerId) return;
+  hidQrGenerating.value = true;
+  hidQrError.value = "";
+  try {
+    const response = await issueVisitorQr(hidQrConfig.value.readerId, {
+      visitorId: String(hidQrVisitor.value._id),
+      validityMinutes: hidQrConfig.value.validityMinutes,
+    });
+    const credential = "data" in response ? response.data : response;
+    hidQrImageUrl.value = await QRCode.toDataURL(credential.qrValue, { width: 360, margin: 2, errorCorrectionLevel: "M" });
+    hidQrExpiresAt.value = credential.expiresAt;
+    hidQrNow.value = Date.now();
+  } catch (error: unknown) {
+    hidQrError.value = errorConverter(error) || "Unable to generate the visitor HID QR code.";
+  } finally {
+    hidQrGenerating.value = false;
+  }
+}
+
+function formatHidQrExpiry(value: string) {
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? value : date.toLocaleString();
+}
+
+function formatHidQrCountdown(totalSeconds: number) {
+  const safe = Math.max(0, totalSeconds);
+  const hours = Math.floor(safe / 3600);
+  const minutes = Math.floor((safe % 3600) / 60);
+  const seconds = safe % 60;
+  return [hours, minutes, seconds].map((part) => String(part).padStart(2, "0")).join(":");
+}
+
+watch(hidQrDialog, (open) => {
+  if (hidQrTimer) clearInterval(hidQrTimer);
+  hidQrTimer = open ? setInterval(() => { hidQrNow.value = Date.now(); }, 1000) : null;
+});
 
 //filter states
 const searchInput = ref("");
@@ -2346,7 +2500,14 @@ const syncVisitorFiltersFromRoute = () => {
   }
 };
 
-onMounted(syncVisitorFiltersFromRoute);
+onMounted(() => {
+  syncVisitorFiltersFromRoute();
+  void loadHidQrConfig();
+});
+
+onBeforeUnmount(() => {
+  if (hidQrTimer) clearInterval(hidQrTimer);
+});
 
 watch(() => route.query, syncVisitorFiltersFromRoute, { deep: true });
 
@@ -2397,4 +2558,11 @@ watchEffect(async () => {
 });
 </script>
 
-<style scoped></style>
+<style scoped>
+.visitor-hid-qr {
+  display: inline-flex;
+  padding: 12px;
+  border: 1px solid #dce3e8;
+  background: #fff;
+}
+</style>

package/composables/useHidAmico.ts

@@ -33,7 +33,7 @@ type HidVisitorQrData = {
   readerId: string;
   hidUserId: number;
   qrValue: string;
-  qrFormat: "0" | "1" | "2";
+  qrFormat: "0";
   issuedAt: string;
   expiresAt: string;
 };
@@ -120,7 +120,7 @@ export default function useHidAmico() {
 
   function issueVisitorQr(
     readerId: string,
-    payload: { visitorId: string; validityMinutes: number; qrFormat: "0" | "1" | "2" },
+    payload: { visitorId: string; validityMinutes: number },
   ) {
     return useNuxtApp().$api<HidVisitorQrResponse>(`${basePath}/readers/${readerId}/visitor-qr`, {
       method: "POST",
@@ -189,6 +189,27 @@ export default function useHidAmico() {
     );
   }
 
+  function getUserPinStatus(readerId: string, hidUserId: string | number) {
+    return useNuxtApp().$api<{ data: { pinEnrolled: boolean } }>(
+      `${basePath}/readers/${readerId}/users/${hidUserId}/pin`,
+      { method: "GET" },
+    );
+  }
+
+  function setUserPin(readerId: string, hidUserId: string | number, pin: string) {
+    return useNuxtApp().$api<{ data: { pinEnrolled: boolean } }>(
+      `${basePath}/readers/${readerId}/users/${hidUserId}/pin`,
+      { method: "PUT", body: { pin } },
+    );
+  }
+
+  function deleteUserPin(readerId: string, hidUserId: string | number) {
+    return useNuxtApp().$api<{ data: { pinEnrolled: boolean } }>(
+      `${basePath}/readers/${readerId}/users/${hidUserId}/pin`,
+      { method: "DELETE" },
+    );
+  }
+
   function createIdentity(readerId: string, payload: HidIdentityPayload) {
     return useNuxtApp().$api<Record<string, any>>(`${basePath}/readers/${readerId}/identities`, {
       method: "POST",
@@ -286,6 +307,9 @@ export default function useHidAmico() {
     getUserImage,
     setUserImage,
     deleteUserImage,
+    getUserPinStatus,
+    setUserPin,
+    deleteUserPin,
     getIdentities,
     createIdentity,
     updateIdentity,

package/composables/useRole.ts

@@ -68,6 +68,26 @@ export default function useRole() {
     });
   }
 
+  function getDeletionPreview(_id: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/roles/${_id}/deletion-preview`,
+      { method: "GET" }
+    );
+  }
+
+  function deleteWithReassignments(
+    _id: string,
+    reassignments: Array<{ memberId: string; roleId: string }>
+  ) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/roles/${_id}/delete-with-reassignments`,
+      {
+        method: "PUT",
+        body: { reassignments },
+      }
+    );
+  }
+
   const role = useState<TRole>("userRole", () => {
     return {
       _id: "",
@@ -103,6 +123,8 @@ export default function useRole() {
     updateRoleById,
     updateRoleFieldById,
     deleteRole,
+    getDeletionPreview,
+    deleteWithReassignments,
     updatePermissionById,
     getRoleByUserId,
   };

package/composables/useSipWebPhone.ts

@@ -31,6 +31,12 @@ export default function useSipWebPhone() {
 
   const isRegistered = computed(() => connectionState.value === "registered");
   const hasCall = computed(() => callState.value !== "idle");
+  const audioConstraints: MediaTrackConstraints = {
+    echoCancellation: true,
+    noiseSuppression: true,
+    autoGainControl: true,
+    channelCount: 1,
+  };
 
   async function connect(config: SipWebPhoneConfig, media: SipWebPhoneMedia) {
     validateConfig(config);
@@ -73,6 +79,7 @@ export default function useSipWebPhone() {
         },
         onCallAnswered: () => {
           callState.value = "active";
+          ensureMicrophoneSending();
           syncVideoState();
         },
         onCallHangup: () => {
@@ -104,7 +111,9 @@ export default function useSipWebPhone() {
         aor: normalizeSipUri(config.aor),
         delegate,
         media: {
-          constraints: { audio: true, video: false },
+          // The browser sends microphone audio and receives HID audio/video.
+          // Do not request a local camera merely because the HID video leg is enabled.
+          constraints: { audio: audioConstraints, video: false },
           remote: {
             audio: media.remoteAudio || undefined,
             video: media.remoteVideo || undefined,
@@ -167,7 +176,7 @@ export default function useSipWebPhone() {
     callState.value = "calling";
     try {
       const sessionDescriptionHandlerOptions: SessionDescriptionHandlerOptions = {
-        constraints: { audio: true, video: false },
+        constraints: { audio: audioConstraints, video: false },
         offerOptions: {
           offerToReceiveAudio: true,
           offerToReceiveVideo: Boolean(activeConfig.value?.video),
@@ -184,7 +193,11 @@ export default function useSipWebPhone() {
   async function answer() {
     const user = requireRegisteredUser();
     const sessionDescriptionHandlerOptions: SessionDescriptionHandlerOptions = {
-      constraints: { audio: true, video: false },
+      constraints: { audio: audioConstraints, video: false },
+      offerOptions: {
+        offerToReceiveAudio: true,
+        offerToReceiveVideo: Boolean(activeConfig.value?.video),
+      },
     };
     await user.answer({ sessionDescriptionHandlerOptions });
   }
@@ -214,6 +227,18 @@ export default function useSipWebPhone() {
     muted.value = !enable;
   }
 
+  function ensureMicrophoneSending() {
+    const tracks = simpleUser.value?.localMediaStream?.getAudioTracks() || [];
+    if (!tracks.length) {
+      errorMessage.value = "The call connected without a microphone track. Reconnect and allow microphone access.";
+      return;
+    }
+    tracks.forEach((track) => {
+      track.enabled = true;
+    });
+    muted.value = false;
+  }
+
   function syncVideoState() {
     const user = simpleUser.value;
     const remoteStream = user?.remoteMediaStream;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.83",
+  "version": "3.2.2-staging.85",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {