@7365admin1/layer-common 3.1.4-staging.56 → 3.1.4-staging.57

package/components/HidIntercomManagement.vue

@@ -386,54 +386,28 @@
         <v-card-text class="web-phone-body">
           <div class="web-phone-settings">
             <div class="web-phone-section-title">SIP Account</div>
-            <div class="call-label">WebSocket Server <span>*</span></div>
-            <v-text-field
-              v-model="webPhoneForm.webSocketServer"
-              placeholder="wss://sip.example.com/ws"
-              variant="outlined"
-              density="compact"
-              hide-details="auto"
-              class="call-input"
-              :disabled="webPhone.isRegistered.value"
-            />
-            <div class="call-label">SIP Address <span>*</span></div>
-            <v-text-field
-              v-model="webPhoneForm.aor"
-              placeholder="operator@example.com"
-              variant="outlined"
-              density="compact"
-              hide-details="auto"
-              class="call-input"
-              :disabled="webPhone.isRegistered.value"
-            />
-            <div class="form-two-col">
+            <div v-if="sipAccountLoading" class="sip-account-state">
+              <v-progress-circular indeterminate color="primary" size="30" width="3" />
+              <span>Preparing your private SIP account...</span>
+            </div>
+            <div v-else-if="sipAccountError" class="sip-account-state is-error">
+              <v-icon icon="mdi-alert-circle-outline" size="28" />
+              <span>{{ sipAccountError }}</span>
+              <v-btn
+                class="text-none sip-account-retry"
+                variant="outlined"
+                prepend-icon="mdi-refresh"
+                @click="loadSipAccount"
+              >
+                Retry
+              </v-btn>
+            </div>
+            <div v-else-if="sipAccount" class="sip-account-summary">
               <div>
-                <div class="call-label">Username <span>*</span></div>
-                <v-text-field
-                  v-model="webPhoneForm.username"
-                  placeholder="Username"
-                  variant="outlined"
-                  density="compact"
-                  hide-details="auto"
-                  class="call-input"
-                  :disabled="webPhone.isRegistered.value"
-                />
-              </div>
-              <div>
-                <div class="call-label">Password <span>*</span></div>
-                <v-text-field
-                  v-model="webPhoneForm.password"
-                  placeholder="Password"
-                  :type="showWebPhonePassword ? 'text' : 'password'"
-                  :append-inner-icon="showWebPhonePassword ? 'mdi-eye-off' : 'mdi-eye'"
-                  variant="outlined"
-                  density="compact"
-                  hide-details="auto"
-                  class="call-input"
-                  :disabled="webPhone.isRegistered.value"
-                  @click:append-inner="showWebPhonePassword = !showWebPhonePassword"
-                />
+                <span class="sip-account-label">Assigned extension</span>
+                <strong class="sip-account-extension">{{ sipAccount.extension }}</strong>
               </div>
+              <span class="sip-account-address">{{ sipAccount.sipAddress }}</span>
             </div>
             <div class="call-toggle-row web-video-toggle">
               <span>Enable video</span>
@@ -452,6 +426,7 @@
               variant="flat"
               prepend-icon="mdi-lan-connect"
               :loading="webPhoneConnecting"
+              :disabled="!sipAccount || sipAccountLoading"
               @click="connectWebPhone"
             >
               Connect Web Phone
@@ -613,6 +588,10 @@
 
 <script setup lang="ts">
 const props = defineProps({
+  org: {
+    type: String,
+    required: true,
+  },
   site: {
     type: String,
     required: true,
@@ -631,6 +610,19 @@ type ContactRow = {
   dialCode: string;
 };
 
+type SipAccount = {
+  orgId: string;
+  site: string;
+  userId: string;
+  extension: string;
+  username: string;
+  password: string;
+  sipAddress: string;
+  websocketUrl: string;
+  status: "active";
+  provisionedAt: string;
+};
+
 type DetailItem = {
   label: string;
   value?: string | number | boolean;
@@ -678,6 +670,7 @@ const {
   getIntercomStatus,
   makeIntercomCall,
   finalizeIntercomCall,
+  ensureSipAccount,
 } = useHidAmico();
 
 const activeTab = ref<IntercomTab>("intercom");
@@ -696,9 +689,11 @@ const limit = 20;
 const selectedRow = ref<IntercomRow | null>(null);
 const selectedContact = ref<ContactRow | null>(null);
 const showSipPassword = ref(false);
-const showWebPhonePassword = ref(false);
 const webPhoneConnecting = ref(false);
 const webPhoneActionLoading = ref(false);
+const sipAccount = ref<SipAccount | null>(null);
+const sipAccountLoading = ref(false);
+const sipAccountError = ref("");
 const localVideoEl = ref<HTMLVideoElement | null>(null);
 const remoteVideoEl = ref<HTMLVideoElement | null>(null);
 const remoteAudioEl = ref<HTMLAudioElement | null>(null);
@@ -787,10 +782,6 @@ const makeCallForm = reactive({
 });
 
 const webPhoneForm = reactive({
-  webSocketServer: "",
-  aor: "",
-  username: "",
-  password: "",
   destination: "",
   video: false,
 });
@@ -926,8 +917,14 @@ const webPhoneCallIcon = computed(() => {
 });
 
 watch(
-  () => props.site,
-  () => reload(),
+  [() => props.org, () => props.site],
+  () => {
+    if (webPhone.isRegistered.value) void webPhone.disconnect();
+    sipAccount.value = null;
+    sipAccountError.value = "";
+    webPhoneForm.destination = "";
+    void reload();
+  },
   { immediate: true },
 );
 
@@ -1178,16 +1175,42 @@ function openWebPhoneDialog(row?: IntercomRow) {
     }
   }
   webPhoneDialog.value = true;
+  if (!sipAccount.value && !sipAccountLoading.value) void loadSipAccount();
+}
+
+async function loadSipAccount() {
+  if (!props.org || !props.site) return;
+
+  sipAccountLoading.value = true;
+  sipAccountError.value = "";
+  try {
+    const response = await ensureSipAccount(props.site, props.org);
+    sipAccount.value = normalizeSipAccount(response);
+  } catch (error: unknown) {
+    sipAccount.value = null;
+    sipAccountError.value = getErrorMessage(error);
+  } finally {
+    sipAccountLoading.value = false;
+  }
 }
 
 async function connectWebPhone() {
+  const account = sipAccount.value;
+  if (!account) {
+    await loadSipAccount();
+    if (!sipAccount.value) return;
+  }
+
+  const activeAccount = sipAccount.value;
+  if (!activeAccount) return;
+
   webPhoneConnecting.value = true;
   try {
     await webPhone.connect({
-      webSocketServer: webPhoneForm.webSocketServer,
-      aor: webPhoneForm.aor,
-      authorizationUsername: webPhoneForm.username,
-      authorizationPassword: webPhoneForm.password,
+      webSocketServer: activeAccount.websocketUrl,
+      aor: activeAccount.sipAddress,
+      authorizationUsername: activeAccount.username,
+      authorizationPassword: activeAccount.password,
       displayName: "iService365 Web",
       video: webPhoneForm.video,
     }, {
@@ -1196,7 +1219,7 @@ async function connectWebPhone() {
       remoteAudio: remoteAudioEl.value,
     });
     showMessage("Web phone connected and ready to receive calls.", "success");
-  } catch (error: any) {
+  } catch (error: unknown) {
     showMessage(getErrorMessage(error), "error");
   } finally {
     webPhoneConnecting.value = false;
@@ -1492,8 +1515,42 @@ function showMessage(text: string, type: MessageType = "info") {
   message.type = type;
 }
 
-function getErrorMessage(error: any) {
-  return error?.data?.message || error?.response?._data?.message || error?.message || "HID intercom request failed.";
+function normalizeSipAccount(response: unknown): SipAccount {
+  const responseRecord = toRecord(response);
+  const payload = toRecord(responseRecord.data || responseRecord);
+  const requiredFields = ["extension", "username", "password", "sipAddress", "websocketUrl"] as const;
+
+  if (requiredFields.some((field) => !toText(payload[field]))) {
+    throw new Error("The SIP account response is incomplete. Please try again.");
+  }
+
+  return {
+    orgId: toText(payload.orgId, props.org),
+    site: toText(payload.site, props.site),
+    userId: toText(payload.userId),
+    extension: toText(payload.extension),
+    username: toText(payload.username),
+    password: toText(payload.password),
+    sipAddress: toText(payload.sipAddress),
+    websocketUrl: toText(payload.websocketUrl),
+    status: "active",
+    provisionedAt: toText(payload.provisionedAt),
+  };
+}
+
+function getErrorMessage(error: unknown) {
+  const errorRecord = toRecord(error);
+  const data = toRecord(errorRecord.data);
+  const response = toRecord(errorRecord.response);
+  const responseData = toRecord(response._data);
+  return toText(data.message)
+    || toText(responseData.message)
+    || toText(errorRecord.message)
+    || "HID intercom request failed.";
+}
+
+function toRecord(value: unknown): Record<string, unknown> {
+  return typeof value === "object" && value !== null ? value as Record<string, unknown> : {};
 }
 
 function toText(value: unknown, fallback = "") {
@@ -2226,6 +2283,73 @@ export default {
   font-weight: 700;
 }
 
+.sip-account-state {
+  display: flex;
+  min-height: 126px;
+  align-items: center;
+  justify-content: center;
+  padding: 18px;
+  border: 1px solid #dce2e8;
+  border-radius: 6px;
+  color: #5d6673;
+  flex-direction: column;
+  font-size: 12px;
+  gap: 12px;
+  text-align: center;
+}
+
+.sip-account-state.is-error {
+  border-color: #f0c7c7;
+  background: #fff8f8;
+  color: #a92222;
+}
+
+.sip-account-retry {
+  min-width: 104px;
+  border-color: #aeb8c2;
+  color: #344054;
+}
+
+.sip-account-summary {
+  display: grid;
+  min-height: 96px;
+  align-items: center;
+  padding: 16px;
+  border: 1px solid #dce2e8;
+  border-radius: 6px;
+  background: #f8fafc;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 18px;
+}
+
+.sip-account-summary > div {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.sip-account-label {
+  color: #667085;
+  font-size: 11px;
+}
+
+.sip-account-extension {
+  color: #0d1720;
+  font-size: 24px;
+  line-height: 1.1;
+}
+
+.sip-account-address {
+  max-width: 170px;
+  overflow: hidden;
+  color: #536273;
+  font-size: 11px;
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .web-video-toggle {
   margin-top: 12px;
 }

package/components/HidQrCodeConfiguration.vue

@@ -178,7 +178,41 @@
 
         <v-divider />
 
-        <div class="permission-section">
+        <div v-if="isPermissionManager" class="permission-section">
+          <div class="permission-location">
+            <div class="permission-copy">
+              <div class="section-label">Permission Location</div>
+              <p class="section-description">
+                Permissions are scoped to the location configured on the HID Face Reader.
+              </p>
+            </div>
+            <v-select
+              v-model="permissionReaderId"
+              class="permission-location__select"
+              :items="permissionLocations"
+              item-title="label"
+              item-value="readerId"
+              placeholder="Select a Face Reader location"
+              variant="outlined"
+              density="compact"
+              hide-details
+              :disabled="permissionLocations.length === 0"
+              @update:model-value="loadPermissions"
+            />
+          </div>
+
+          <v-alert
+            v-if="permissionLocations.length === 0"
+            class="mb-4"
+            type="warning"
+            variant="tonal"
+            density="compact"
+          >
+            Add a Location to a Face Reader before assigning HID permissions.
+          </v-alert>
+
+          <v-divider />
+
           <div class="permission-row">
             <div class="permission-copy">
               <div class="section-label">Access Permission</div>
@@ -192,7 +226,7 @@
                 :key="option.category"
                 class="permission-button text-none"
                 variant="outlined"
-                :disabled="!form.onlineMode"
+                :disabled="!form.onlineMode || !permissionReaderId"
                 @click="openPermissionDialog(option.category)"
               >
                 <span class="permission-count">{{ permissionCount(option.category) }}</span>
@@ -214,7 +248,7 @@
               <v-btn
                 class="permission-button text-none"
                 variant="outlined"
-                :disabled="!form.onlineMode || permissionState.assignments.length === 0"
+                :disabled="!form.onlineMode || !permissionReaderId || permissionState.assignments.length === 0"
                 @click="openPermissionDialog('intercom')"
               >
                 <span class="permission-count">{{ permissionState.counts.intercom }}</span>
@@ -261,7 +295,7 @@
       </v-card>
     </v-dialog>
 
-    <v-dialog v-model="permissionDialog" max-width="640" persistent>
+    <v-dialog v-model="permissionDialog" max-width="680" persistent>
       <v-card class="permission-dialog">
         <v-card-title class="permission-dialog__header">
           <div>
@@ -280,6 +314,7 @@
         <v-card-text class="permission-dialog__body">
           <v-text-field
             v-model="permissionSearch"
+            class="permission-search"
             prepend-inner-icon="mdi-magnify"
             placeholder="Search by name or details"
             variant="outlined"
@@ -288,6 +323,13 @@
             clearable
           />
 
+          <div class="permission-list-summary" aria-live="polite">
+            <span>{{ visiblePermissionCandidates.length }} entries</span>
+            <span class="permission-list-summary__selected">
+              {{ selectedPermissionIds.size }} selected
+            </span>
+          </div>
+
           <div class="permission-list" :class="{ 'permission-list--loading': loadingPermissionCandidates }">
             <div v-if="loadingPermissionCandidates" class="permission-empty">
               <v-progress-circular indeterminate color="primary" size="28" />
@@ -299,17 +341,20 @@
                 v-for="candidate in visiblePermissionCandidates"
                 :key="`${candidate.category}:${candidate.subjectId}`"
                 class="permission-list-item"
+                :class="{ 'permission-list-item--selected': selectedPermissionIds.has(candidate.subjectId) }"
               >
-                <v-checkbox-btn
-                  :model-value="selectedPermissionIds.has(candidate.subjectId)"
-                  color="success"
-                  @update:model-value="togglePermissionCandidate(candidate.subjectId, Boolean($event))"
-                />
                 <span class="permission-list-item__content">
                   <strong>{{ candidate.name }}</strong>
                   <small>{{ candidate.subtitle || permissionCategoryLabel(candidate.category) }}</small>
                 </span>
                 <span class="permission-list-item__group">{{ permissionCategoryLabel(candidate.category) }}</span>
+                <v-checkbox-btn
+                  class="permission-list-item__checkbox"
+                  :model-value="selectedPermissionIds.has(candidate.subjectId)"
+                  :aria-label="`Select ${candidate.name}`"
+                  color="success"
+                  @update:model-value="togglePermissionCandidate(candidate.subjectId, Boolean($event))"
+                />
               </label>
             </template>
 
@@ -355,6 +400,7 @@ type HidReaderOption = {
   _id: string;
   name?: string;
   deviceId?: string;
+  location?: string;
 };
 
 type HidReaderListResponse = {
@@ -368,8 +414,12 @@ type HidReaderListResponse = {
 
 const props = defineProps<{
   site: string;
+  org: string;
 }>();
 
+const runtimeConfig = useRuntimeConfig();
+const isPermissionManager = computed(() => runtimeConfig.public.APP === "security_agency");
+
 const { getSiteById, updateSitebyId } = useSiteSettings();
 const {
   getReaders,
@@ -418,7 +468,10 @@ const message = ref("");
 const messageColor = ref("success");
 const messageSnackbar = ref(false);
 const permissionState = reactive<THidSitePermissions>({
+  orgId: props.org,
   site: props.site,
+  readerId: "",
+  location: "",
   assignments: [],
   counts: {
     resident: 0,
@@ -428,6 +481,7 @@ const permissionState = reactive<THidSitePermissions>({
   },
 });
 const permissionDialog = ref(false);
+const permissionReaderId = ref("");
 const permissionDialogCategory = ref<THidPermissionCategory | "intercom">("resident");
 const permissionCandidates = ref<THidPermissionCandidate[]>([]);
 const selectedPermissionIds = ref(new Set<string>());
@@ -458,6 +512,26 @@ const accessPermissionOptions: Array<{
   { category: "service_provider", label: "Service Provider" },
 ];
 
+const permissionLocations = computed(() => {
+  const seen = new Set<string>();
+  return readers.value.reduce<Array<{ readerId: string; location: string; label: string }>>((items, reader) => {
+    const location = reader.location?.trim();
+    const key = location?.toLocaleLowerCase();
+    if (!location || !key || seen.has(key)) return items;
+    seen.add(key);
+    items.push({
+      readerId: reader._id,
+      location,
+      label: location,
+    });
+    return items;
+  }, []);
+});
+const selectedPermissionLocation = computed(() => (
+  permissionLocations.value.find((item) => item.readerId === permissionReaderId.value)?.location
+  || "the selected location"
+));
+
 const siteName = computed(() => siteData.value?.name || "Site");
 const siteLabel = computed(() => siteData.value?.code || siteData.value?.block || props.site);
 const validityText = computed(() =>
@@ -478,8 +552,8 @@ const permissionDialogTitle = computed(() => (
 ));
 const permissionDialogDescription = computed(() => (
   permissionDialogCategory.value === "intercom"
-    ? "Select from people and providers who already have HID access permission."
-    : `Select the ${permissionCategoryLabel(permissionDialogCategory.value).toLowerCase()} entries allowed to use HID access at this site.`
+    ? `Select from people and providers who already have HID access permission at ${selectedPermissionLocation.value}.`
+    : `Select the ${permissionCategoryLabel(permissionDialogCategory.value).toLowerCase()} entries allowed to use HID access at ${selectedPermissionLocation.value}.`
 ));
 const permissionEmptyMessage = computed(() => (
   permissionDialogCategory.value === "intercom" && permissionState.assignments.length === 0
@@ -488,7 +562,7 @@ const permissionEmptyMessage = computed(() => (
 ));
 
 watch(
-  () => props.site,
+  () => [props.org, props.site],
   () => loadConfig(),
   { immediate: true },
 );
@@ -529,13 +603,30 @@ async function loadConfig() {
     validityMinutes: config.validityMinutes ? Number(config.validityMinutes) : null,
   });
 
-  await Promise.all([loadReaderConfiguration(), loadPermissions()]);
+  permissionReaderId.value = permissionLocations.value.find((item) => item.readerId === form.readerId)?.readerId
+    || permissionLocations.value[0]?.readerId
+    || "";
+
+  await Promise.all([
+    loadReaderConfiguration(),
+    isPermissionManager.value ? loadPermissions() : Promise.resolve(),
+  ]);
 }
 
 async function loadPermissions() {
-  if (!props.site) return;
+  if (!props.org || !props.site || !permissionReaderId.value) {
+    Object.assign(permissionState, {
+      orgId: props.org,
+      site: props.site,
+      readerId: "",
+      location: "",
+      assignments: [],
+      counts: { resident: 0, propertyManagement: 0, serviceProvider: 0, intercom: 0 },
+    });
+    return;
+  }
   try {
-    const response = await getSitePermissions(props.site);
+    const response = await getSitePermissions(props.site, props.org, permissionReaderId.value);
     Object.assign(permissionState, response.data);
   } catch (error: unknown) {
     console.error("Unable to load HID permissions:", errorConverter(error));
@@ -553,6 +644,7 @@ function permissionCount(category: THidPermissionCategory) {
 }
 
 async function openPermissionDialog(category: THidPermissionCategory | "intercom") {
+  if (!props.org || !permissionReaderId.value) return;
   permissionDialogCategory.value = category;
   permissionSearch.value = "";
   permissionCandidates.value = [];
@@ -562,6 +654,8 @@ async function openPermissionDialog(category: THidPermissionCategory | "intercom
 
   try {
     const response = await getPermissionCandidates(props.site, {
+      orgId: props.org,
+      readerId: permissionReaderId.value,
       category,
       page: 1,
       limit: 500,
@@ -621,7 +715,12 @@ async function savePermissions() {
 
   savingPermissions.value = true;
   try {
-    const response = await updateSitePermissions(props.site, assignments);
+    const response = await updateSitePermissions(
+      props.site,
+      props.org,
+      permissionReaderId.value,
+      assignments,
+    );
     Object.assign(permissionState, response.data);
     permissionDialog.value = false;
     showMessage("HID permissions updated.", "success");
@@ -940,6 +1039,18 @@ function showMessage(text: string, color: string) {
   padding-top: 2px;
 }
 
+.permission-location {
+  display: grid;
+  grid-template-columns: minmax(260px, 1fr) minmax(320px, 1.35fr);
+  gap: 36px;
+  align-items: center;
+  padding: 18px 0;
+}
+
+.permission-location__select {
+  width: 100%;
+}
+
 .permission-row {
   display: grid;
   grid-template-columns: minmax(260px, 1fr) minmax(520px, 1.35fr);
@@ -1002,8 +1113,8 @@ function showMessage(text: string, color: string) {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 20px;
-  padding: 20px 22px 16px;
+  gap: 16px;
+  padding: 16px 18px 14px;
   border-bottom: 1px solid #e5e9ed;
 }
 
@@ -1022,16 +1133,35 @@ function showMessage(text: string, color: string) {
 
 .permission-dialog__body {
   display: grid;
-  gap: 16px;
-  padding: 18px 22px;
+  gap: 10px;
+  padding: 14px 18px 16px;
+}
+
+.permission-search :deep(.v-field) {
+  min-height: 44px;
+}
+
+.permission-list-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 22px;
+  color: #778391;
+  font-size: 11px;
+}
+
+.permission-list-summary__selected {
+  color: #286c3c;
+  font-weight: 700;
 }
 
 .permission-list {
-  min-height: 240px;
-  max-height: 390px;
+  min-height: 180px;
+  max-height: min(360px, 48vh);
   overflow-y: auto;
   border: 1px solid #dfe5ea;
   border-radius: 6px;
+  background: #ffffff;
 }
 
 .permission-list--loading {
@@ -1041,13 +1171,14 @@ function showMessage(text: string, color: string) {
 
 .permission-list-item {
   display: grid;
-  grid-template-columns: 34px minmax(0, 1fr) auto;
-  gap: 10px;
+  grid-template-columns: minmax(0, 1fr) max-content 32px;
+  gap: 12px;
   align-items: center;
-  min-height: 62px;
-  padding: 8px 14px 8px 8px;
+  min-height: 56px;
+  padding: 7px 12px;
   border-bottom: 1px solid #edf0f3;
   cursor: pointer;
+  transition: background-color 120ms ease;
 }
 
 .permission-list-item:last-child {
@@ -1058,8 +1189,17 @@ function showMessage(text: string, color: string) {
   background: #f7fafc;
 }
 
+.permission-list-item--selected {
+  background: #f1f8f3;
+}
+
+.permission-list-item--selected:hover {
+  background: #eaf5ed;
+}
+
 .permission-list-item__content {
   display: grid;
+  gap: 2px;
   min-width: 0;
 }
 
@@ -1073,6 +1213,7 @@ function showMessage(text: string, color: string) {
 .permission-list-item__content strong {
   color: #243443;
   font-size: 13px;
+  line-height: 1.35;
 }
 
 .permission-list-item__content small,
@@ -1082,9 +1223,21 @@ function showMessage(text: string, color: string) {
 }
 
 .permission-list-item__group {
-  padding: 4px 8px;
+  max-width: 170px;
+  overflow: hidden;
+  padding: 4px 9px;
   border-radius: 4px;
   background: #eef2f5;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.permission-list-item__checkbox {
+  justify-self: end;
+}
+
+.permission-list-item__checkbox :deep(.v-selection-control) {
+  min-height: 32px;
 }
 
 .permission-empty {
@@ -1093,7 +1246,7 @@ function showMessage(text: string, color: string) {
   align-items: center;
   justify-content: center;
   gap: 10px;
-  min-height: 240px;
+  min-height: 180px;
   padding: 24px;
   color: #75818c;
   font-size: 13px;
@@ -1103,7 +1256,7 @@ function showMessage(text: string, color: string) {
 .permission-dialog__actions {
   justify-content: flex-end;
   gap: 8px;
-  padding: 14px 22px;
+  padding: 12px 18px;
   border-top: 1px solid #e5e9ed;
 }
 
@@ -1223,6 +1376,7 @@ function showMessage(text: string, color: string) {
   .printer-grid,
   .template-grid,
   .validity-grid,
+  .permission-location,
   .permission-row {
     grid-template-columns: 1fr 1fr;
   }
@@ -1242,6 +1396,7 @@ function showMessage(text: string, color: string) {
   .template-grid,
   .validity-grid,
   .methods-grid,
+  .permission-location,
   .permission-row,
   .permission-actions {
     grid-template-columns: 1fr;
@@ -1256,11 +1411,20 @@ function showMessage(text: string, color: string) {
   }
 
   .permission-list-item {
-    grid-template-columns: 34px minmax(0, 1fr);
+    grid-template-columns: minmax(0, 1fr) 32px;
+    gap: 8px;
   }
 
   .permission-list-item__group {
-    display: none;
+    grid-column: 1;
+    grid-row: 2;
+    justify-self: start;
+    max-width: 100%;
+  }
+
+  .permission-list-item__checkbox {
+    grid-column: 2;
+    grid-row: 1 / span 2;
   }
 }
 </style>

package/components/HidUserEnrollment.vue

@@ -137,10 +137,24 @@
               </template>
               <v-list density="compact" min-width="190">
                 <v-list-item title="Browse" @click="triggerPhotoInput" />
-                <v-list-item title="Take Photo using Camera" @click="triggerPhotoInput" />
+                <v-list-item title="Take Photo using Camera" @click="triggerCameraInput" />
+                <v-list-item
+                  v-if="form.photoPreview"
+                  title="Remove Photo"
+                  class="text-error"
+                  @click="removePhoto"
+                />
               </v-list>
             </v-menu>
             <input ref="photoInput" type="file" accept="image/*" class="hidden-input" @change="onPhotoChange" />
+            <input
+              ref="cameraInput"
+              type="file"
+              accept="image/*"
+              capture="user"
+              class="hidden-input"
+              @change="onPhotoChange"
+            />
           </div>
 
           <div class="field-label">Name <span>*</span></div>
@@ -270,6 +284,8 @@ const {
   getReaders,
   getIdentities,
   getUserImage,
+  setUserImage,
+  deleteUserImage,
   runObjectOperation,
   createIdentity,
   updateIdentity,
@@ -296,6 +312,9 @@ const deleteDialog = ref(false);
 const selectedUser = ref<Record<string, any> | null>(null);
 const showPassword = ref(false);
 const photoInput = ref<HTMLInputElement | null>(null);
+const cameraInput = ref<HTMLInputElement | null>(null);
+const selectedPhotoFile = ref<File | null>(null);
+const removePhotoRequested = ref(false);
 const snackbar = reactive({
   show: false,
   color: "success",
@@ -438,6 +457,8 @@ function resetForm() {
   form.cardNo = "";
   form.pinPassword = "";
   form.photoPreview = "";
+  selectedPhotoFile.value = null;
+  removePhotoRequested.value = false;
 }
 
 async function openEnroll() {
@@ -464,6 +485,8 @@ async function openEdit(user: Record<string, any>) {
   form.cardNo = user.cardNo ?? "";
   form.pinPassword = user.metadata?.pinPassword ?? "";
   form.photoPreview = getUserImageSrc(user);
+  selectedPhotoFile.value = null;
+  removePhotoRequested.value = false;
   formDialog.value = true;
 
   if (!form.photoPreview) {
@@ -488,9 +511,32 @@ function triggerPhotoInput() {
   photoInput.value?.click();
 }
 
+function triggerCameraInput() {
+  cameraInput.value?.click();
+}
+
+function removePhoto() {
+  form.photoPreview = "";
+  selectedPhotoFile.value = null;
+  removePhotoRequested.value = true;
+}
+
 function onPhotoChange(event: Event) {
-  const file = (event.target as HTMLInputElement).files?.[0];
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0];
+  input.value = "";
   if (!file) return;
+  if (!["image/jpeg", "image/png"].includes(file.type)) {
+    showToast("Facial enrollment only accepts JPG or PNG images.", "error");
+    return;
+  }
+  if (file.size > 2 * 1024 * 1024) {
+    showToast("Facial enrollment images must be smaller than 2 MB.", "error");
+    return;
+  }
+
+  selectedPhotoFile.value = file;
+  removePhotoRequested.value = false;
   const reader = new FileReader();
   reader.onload = () => {
     form.photoPreview = String(reader.result || "");
@@ -531,6 +577,8 @@ async function saveUser() {
         unitLabel: buildUnitLabel(),
         facialData: form.photoPreview ? form.hidUserId : "",
         photo: form.photoPreview,
+        imageTimestamp: selectedUser.value?.metadata?.imageTimestamp || "",
+        facialScores: selectedUser.value?.metadata?.facialScores || {},
         pinPassword: form.pinPassword,
       },
     };
@@ -538,6 +586,8 @@ async function saveUser() {
     if (selectedUser.value) {
       await updateHidUserOnReader(readerId, hidUser);
       await syncHidUserRole(readerId, hidUser.id, isAdministratorIdentity());
+      const facialResult = await syncFacialImage(readerId, hidUser.id);
+      applyFacialResult(payload.metadata, facialResult);
       if (selectedUser.value._id) {
         await updateIdentity(selectedUser.value._id, payload);
       } else {
@@ -546,6 +596,8 @@ async function saveUser() {
     } else {
       await createHidUserOnReader(readerId, hidUser);
       await syncHidUserRole(readerId, hidUser.id, isAdministratorIdentity());
+      const facialResult = await syncFacialImage(readerId, hidUser.id);
+      applyFacialResult(payload.metadata, facialResult);
       await saveIdentityOnReader(readerId, payload);
       selectedReaderId.value = readerId;
     }
@@ -561,6 +613,46 @@ async function saveUser() {
   }
 }
 
+type FacialSyncResult = {
+  action: "none" | "enrolled" | "removed";
+  timestamp?: number;
+  scores?: Record<string, unknown>;
+};
+
+async function syncFacialImage(readerId: string, hidUserId: number): Promise<FacialSyncResult> {
+  if (selectedPhotoFile.value) {
+    const timestamp = Math.floor(Date.now() / 1000);
+    const response = await setUserImage(readerId, hidUserId, selectedPhotoFile.value, {
+      timestamp,
+      match: true,
+    });
+    const result = response?.data;
+    userImages.value[String(hidUserId)] = form.photoPreview;
+    return { action: "enrolled", timestamp, scores: result?.scores };
+  }
+
+  if (removePhotoRequested.value) {
+    await deleteUserImage(readerId, hidUserId);
+    delete userImages.value[String(hidUserId)];
+    return { action: "removed" };
+  }
+
+  return { action: "none" };
+}
+
+function applyFacialResult(metadata: Record<string, unknown>, result: FacialSyncResult) {
+  if (result.action === "enrolled") {
+    metadata.facialData = form.hidUserId;
+    metadata.imageTimestamp = String(result.timestamp || "");
+    metadata.facialScores = result.scores || {};
+  } else if (result.action === "removed") {
+    metadata.facialData = "";
+    metadata.photo = "";
+    metadata.imageTimestamp = "";
+    metadata.facialScores = {};
+  }
+}
+
 async function deleteUser() {
   if (!selectedUser.value) return;
 

package/components/SiteSettings.vue

@@ -163,7 +163,7 @@
             @refresh="refreshSiteData"
           />
           <v-divider class="my-4" />
-          <HidQrCodeConfiguration :site="siteId" />
+          <HidQrCodeConfiguration :site="siteId" :org="orgId" />
         </v-expansion-panel-text>
       </v-expansion-panel>
 
@@ -266,7 +266,9 @@ const { data: siteData, refresh: refreshSiteData } = await useLazyAsyncData(
   `site-${props.siteId}`,
   () => getSiteById(props.siteId)
 );
-const orgId = computed(() => props.orgId || String((siteData.value as any)?.orgId ?? ""));
+const orgId = computed(
+  () => props.orgId || String((siteData.value as TSite | null)?.orgId ?? "")
+);
 
 watch(
   siteData,

package/composables/useHidAmico.ts

@@ -48,6 +48,26 @@ type HidPermissionListResponse = {
   limit: number;
 };
 
+type HidFacialEnrollmentResult = {
+  user_id?: number;
+  success?: boolean;
+  scores?: Record<string, unknown>;
+  errors?: Array<{ code?: number; message?: string }>;
+};
+
+export type HidSipAccountData = {
+  orgId: string;
+  site: string;
+  userId: string;
+  extension: string;
+  username: string;
+  password: string;
+  sipAddress: string;
+  websocketUrl: string;
+  status: "active";
+  provisionedAt: string;
+};
+
 export default function useHidAmico() {
   const basePath = "/api/access-management/hid";
 
@@ -142,6 +162,33 @@ export default function useHidAmico() {
     });
   }
 
+  function setUserImage(
+    readerId: string,
+    hidUserId: string | number,
+    image: Blob,
+    options: { timestamp?: number; match?: boolean } = {},
+  ) {
+    return useNuxtApp().$api<{ data: HidFacialEnrollmentResult }>(
+      `${basePath}/readers/${readerId}/users/${hidUserId}/image`,
+      {
+        method: "PUT",
+        query: {
+          ...(options.timestamp ? { timestamp: options.timestamp } : {}),
+          match: options.match ?? true,
+        },
+        headers: { "Content-Type": "application/octet-stream" },
+        body: image,
+      },
+    );
+  }
+
+  function deleteUserImage(readerId: string, hidUserId: string | number) {
+    return useNuxtApp().$api<Record<string, unknown>>(
+      `${basePath}/readers/${readerId}/users/${hidUserId}/image`,
+      { method: "DELETE" },
+    );
+  }
+
   function createIdentity(readerId: string, payload: HidIdentityPayload) {
     return useNuxtApp().$api<Record<string, any>>(`${basePath}/readers/${readerId}/identities`, {
       method: "POST",
@@ -181,16 +228,25 @@ export default function useHidAmico() {
     });
   }
 
-  function getSitePermissions(siteId: string) {
+  function getSitePermissions(siteId: string, orgId: string, readerId: string) {
     return useNuxtApp().$api<{ data: THidSitePermissions }>(
       `${basePath}/sites/${siteId}/permissions`,
-      { method: "GET" },
+      { method: "GET", query: { orgId, readerId } },
+    );
+  }
+
+  function ensureSipAccount(siteId: string, orgId: string) {
+    return useNuxtApp().$api<{ data: HidSipAccountData }>(
+      `${basePath}/sites/${siteId}/intercom/sip-account`,
+      { method: "POST", body: { orgId } },
     );
   }
 
   function getPermissionCandidates(
     siteId: string,
     query: {
+      orgId: string;
+      readerId: string;
       category: THidPermissionCategory | "intercom";
       search?: string;
       page?: number;
@@ -205,11 +261,13 @@ export default function useHidAmico() {
 
   function updateSitePermissions(
     siteId: string,
+    orgId: string,
+    readerId: string,
     assignments: Array<Pick<THidPermissionAssignment, "subjectId" | "category" | "intercom">>,
   ) {
     return useNuxtApp().$api<{ data: THidSitePermissions; message: string }>(
       `${basePath}/sites/${siteId}/permissions`,
-      { method: "PUT", body: { assignments } },
+      { method: "PUT", body: { orgId, readerId, assignments } },
     );
   }
 
@@ -226,6 +284,8 @@ export default function useHidAmico() {
     setReaderConfiguration,
     getLogs,
     getUserImage,
+    setUserImage,
+    deleteUserImage,
     getIdentities,
     createIdentity,
     updateIdentity,
@@ -233,6 +293,7 @@ export default function useHidAmico() {
     getIntercomStatus,
     makeIntercomCall,
     finalizeIntercomCall,
+    ensureSipAccount,
     getSitePermissions,
     getPermissionCandidates,
     updateSitePermissions,

package/package.json

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

package/pages/[org]/[site]/access-mgmt/intercom/index.vue

@@ -5,7 +5,7 @@
       :org="orgId"
       message="Enable HID as a service for this site before configuring HID intercom."
     >
-      <HidIntercomManagement :site="siteId" />
+      <HidIntercomManagement :site="siteId" :org="orgId" />
     </HidEnabledGate>
   </v-container>
 </template>

package/types/site.d.ts

@@ -13,10 +13,16 @@ declare type THidPermissionAssignment = {
   name: string;
   subtitle?: string;
   intercom: boolean;
+  readerId?: string;
+  location?: string;
+  locationKey?: string;
 };
 
 declare type THidSitePermissions = {
+  orgId: string;
   site: string;
+  readerId: string;
+  location: string;
   assignments: THidPermissionAssignment[];
   counts: {
     resident: number;