@7365admin1/layer-common 3.2.2-staging.84 → 3.2.2-staging.86

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/InvitationMain.vue

@@ -3,10 +3,8 @@
     <v-col cols="12" class="mb-2">
       <v-row no-gutters>
         <v-btn
-          class="text-none mr-2"
-          rounded="pill"
-          variant="tonal"
-          size="large"
+          class="text-none mr-2 screen-btn-primary"
+          variant="flat"
           @click="inviteMember()"
           v-if="props.inviteMember"
         >
@@ -15,8 +13,12 @@
       </v-row>
     </v-col>
     <v-col cols="12">
-      <v-card width="100%" variant="outlined" border="thin" rounded="lg">
-        <v-toolbar density="compact" color="grey-lighten-4">
+      <v-card width="100%" variant="flat" class="table-card">
+        <v-toolbar
+          density="compact"
+          color="transparent"
+          class="table-card__toolbar"
+        >
           <template #prepend>
             <v-btn
               fab
@@ -30,7 +32,7 @@
 
           <template #append>
             <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 text-caption text-fontgray">
+              <span class="mr-2 table-card__range">
                 {{ pageRange }}
               </span>
               <local-pagination
@@ -77,7 +79,7 @@
             <span class="text-caption font-weight-bold text-capitalize">
               permissions
             </span>
-            <v-chip>{{ value.length }}</v-chip>
+            <StatusChip :dot="false" tone="info" :label="String(value.length)" />
           </template>
           <template #item.createdAt="{ item }">
             {{ item.createdAt ? formatDate(item.createdAt) : "" }}

package/components/MemberMain.vue

@@ -4,9 +4,8 @@
       <v-row no-gutters>
         <v-btn
           v-if="props.seatManagement !== 'index'"
-          class="text-none"
-          rounded="pill"
-          variant="tonal"
+          class="text-none screen-btn-primary"
+          variant="flat"
           :to="{
             name: props.seatManagement,
             params: { organization: props.orgId },
@@ -19,8 +18,12 @@
     </v-col>
 
     <v-col cols="12">
-      <v-card width="100%" variant="outlined" border="thin" rounded="lg">
-        <v-toolbar density="compact" color="grey-lighten-4">
+      <v-card width="100%" variant="flat" class="table-card">
+        <v-toolbar
+          density="compact"
+          color="transparent"
+          class="table-card__toolbar"
+        >
           <template #prepend>
             <v-btn fab icon density="comfortable" @click="getAll()">
               <v-icon>mdi-refresh</v-icon>
@@ -29,7 +32,7 @@
 
           <template #append>
             <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 text-caption text-font gray">
+              <span class="mr-2 table-card__range">
                 {{ pageRange }}
               </span>
               <local-pagination

package/components/MyAttendanceMain.vue

@@ -17,10 +17,8 @@
           <v-row no-gutters align="center" class="w-100">
             <v-col cols="auto" v-if="canCheckInOut">
               <v-btn
-                class="text-none"
-                rounded="pill"
-                variant="tonal"
-                size="large"
+                class="text-none screen-btn-primary"
+                variant="flat"
                 @click="onCreateItem"
               >
                 {{ hasCheckedInToday ? "Check Out" : "Check In" }}
@@ -28,7 +26,7 @@
             </v-col>
             <v-spacer />
 
-            <v-col cols="auto">
+            <v-col cols="auto" class="filter-field">
               <v-text-field
                 v-model="searchInput"
                 density="compact"

package/components/RolePermissionMain.vue

@@ -3,11 +3,9 @@
     <v-col cols="12" class="mb-2">
       <v-row no-gutters>
         <v-btn
-          class="text-none"
-          rounded="pill"
-          variant="tonal"
+          class="text-none screen-btn-primary"
+          variant="flat"
           @click="createDialog = true"
-          size="large"
           v-if="canCreateRole"
         >
           Create role
@@ -17,12 +15,15 @@
     <v-col cols="12">
       <v-card
         width="100%"
-        variant="outlined"
-        border="thin"
-        rounded="lg"
+        variant="flat"
+        class="table-card"
         :loading="loading"
       >
-        <v-toolbar density="compact" color="grey-lighten-4">
+        <v-toolbar
+          density="compact"
+          color="transparent"
+          class="table-card__toolbar"
+        >
           <template #prepend>
             <v-btn fab icon density="comfortable" @click="getRoles()">
               <v-icon>mdi-refresh</v-icon>
@@ -31,7 +32,7 @@
 
           <template #append>
             <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 text-caption text-fontgray">
+              <span class="mr-2 table-card__range">
                 {{ pageRange }}
               </span>
               <local-pagination
@@ -58,7 +59,11 @@
             <span class="text-caption font-weight-bold text-capitalize">
               permissions
             </span>
-            <v-chip>{{ getPermissionCount(value) }}</v-chip>
+            <StatusChip
+              :dot="false"
+              tone="info"
+              :label="String(getPermissionCount(value))"
+            />
           </template>
 
           <template #item.action-table="{ item }" v-if="canDeleteRole">

package/components/ScheduleTaskMain.vue

@@ -21,10 +21,8 @@
           <v-row no-gutters align="center" class="w-100">
             <v-col cols="auto" v-if="canCreateScheduleTask">
               <v-btn
-                class="text-none"
-                rounded="pill"
-                variant="tonal"
-                size="large"
+                class="text-none screen-btn-primary"
+                variant="flat"
                 @click="openFormDialog"
               >
                 Create Schedule Task
@@ -33,7 +31,7 @@
 
             <v-spacer />
 
-            <v-col cols="auto">
+            <v-col cols="auto" class="filter-field">
               <v-text-field
                 v-model="searchInput"
                 density="compact"
@@ -49,28 +47,31 @@
 
         <template #item.areas="{ value }">
           <div v-if="value && value.length > 0">
-            <v-chip
+            <StatusChip
               v-for="(area, idx) in value.slice(0, 2)"
               :key="idx"
-              size="small"
               class="mr-1 mb-1"
-            >
-              {{ area.name }}
-            </v-chip>
-            <v-chip v-if="value.length > 2" size="small" class="mb-1">
-              +{{ value.length - 2 }} more
-            </v-chip>
+              :dot="false"
+              tone="neutral"
+              :label="area.name"
+            />
+            <StatusChip
+              v-if="value.length > 2"
+              class="mb-1"
+              :dot="false"
+              tone="neutral"
+              :label="`+${value.length - 2} more`"
+            />
           </div>
           <span v-else>N/A</span>
         </template>
 
         <template #item.status="{ value }">
-          <v-chip
-            :color="value === 'active' ? 'success' : 'default'"
+          <StatusChip
             class="text-capitalize"
-          >
-            {{ value || "N/A" }}
-          </v-chip>
+            :status="value"
+            :label="value || 'N/A'"
+          />
         </template>
       </TableMain>
 
@@ -270,15 +271,11 @@
                     Status:
                   </v-col>
                   <v-col cols="7" class="text-subtitle-2">
-                    <v-chip
-                      :color="
-                        selectedTask.status === 'active' ? 'success' : 'default'
-                      "
-                      size="small"
+                    <StatusChip
                       class="text-capitalize"
-                    >
-                      {{ selectedTask.status || "N/A" }}
-                    </v-chip>
+                      :status="selectedTask.status"
+                      :label="selectedTask.status || 'N/A'"
+                    />
                   </v-col>
                 </v-row>