@7365admin1/layer-common 3.2.1 → 3.2.2-staging.76

package/components/HidQrCodeConfiguration.vue

@@ -9,65 +9,55 @@
       </div>
 
       <div class="config-body">
-        <div class="section-head">
+        <div class="online-mode-row">
           <div>
-            <h3>HID QR Code Pass</h3>
-            <p>Allow users to generate and scan digital QR codes at compatible HID readers for touchless access control.</p>
+            <h3>Activate Online Mode</h3>
+            <p>Enables real-time server communication, synchronizing live credential verification and access data across the network.</p>
           </div>
           <v-switch
-            v-model="form.enabled"
+            v-model="form.onlineMode"
+            class="hid-config-switch"
             color="success"
             hide-details
             inset
-            :loading="savingSection === 'enabled'"
-            @update:model-value="saveSection('enabled')"
-          />
-        </div>
-
-        <div class="form-section">
-          <div class="section-label">HID Reader</div>
-          <v-select
-            v-model="form.readerId"
-            :items="readerOptions"
-            item-title="title"
-            item-value="value"
-            placeholder="Select HID reader"
-            variant="outlined"
-            density="compact"
-            hide-details
-            class="reader-select"
+            :loading="savingSection === 'online-mode'"
+            :disabled="Boolean(savingSection) || !form.readerId"
+            @update:model-value="saveOnlineMode"
           />
         </div>
 
         <v-divider />
 
-        <div class="form-section">
-          <div class="section-label">QR Code Format</div>
-          <div class="validity-grid">
-            <v-select
-              v-model="form.qrFormat"
-              :items="qrFormatOptions"
-              item-title="title"
-              item-value="value"
-              placeholder="Select format"
-              variant="outlined"
-              density="compact"
-              hide-details
-            />
-            <v-btn
-              class="text-none save-button"
-              variant="flat"
-              prepend-icon="mdi-qrcode-edit"
-              height="40"
-              :loading="savingSection === 'qr-format'"
-              :disabled="!form.readerId"
-              @click="saveSection('qr-format')"
+        <div class="form-section identification-section">
+          <div class="section-label">Enable/disable reader identification method</div>
+          <p class="section-description">
+            Toggles multi-factor access methods, allowing users to authenticate via biometric, physical card, or credential inputs.
+          </p>
+          <div class="methods-grid">
+            <div
+              v-for="method in identificationMethodOptions"
+              :key="method.key"
+              class="method-control"
+              :class="{ 'method-control--disabled': !form.onlineMode }"
             >
-              Save Format
-            </v-btn>
+              <span>{{ method.label }}</span>
+              <v-switch
+                v-model="form.identificationMethods[method.key]"
+                class="hid-config-switch"
+                color="success"
+                hide-details
+                inset
+                density="compact"
+                :loading="savingSection === `method-${method.key}`"
+                :disabled="Boolean(savingSection) || !form.onlineMode"
+                @update:model-value="saveIdentificationMethod(method.key)"
+              />
+            </div>
           </div>
         </div>
 
+        <v-divider />
+
         <div class="form-section">
           <div class="section-label">Printer Setup</div>
           <div class="printer-grid">
@@ -99,6 +89,7 @@
               variant="outlined"
               prepend-icon="mdi-printer-check"
               height="40"
+              :loading="testingPrinter"
               :disabled="!hasPrinterConfig"
               @click="testPrint"
             >
@@ -184,6 +175,88 @@
             </v-btn>
           </div>
         </div>
+
+        <v-divider />
+
+        <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>
+              <p class="section-description">
+                Select who can use the enabled HID identification methods at this site.
+              </p>
+            </div>
+            <div class="permission-actions">
+              <v-btn
+                v-for="option in accessPermissionOptions"
+                :key="option.category"
+                class="permission-button text-none"
+                variant="outlined"
+                :disabled="!form.onlineMode || !permissionReaderId"
+                @click="openPermissionDialog(option.category)"
+              >
+                <span class="permission-count">{{ permissionCount(option.category) }}</span>
+                <span>{{ option.label }}</span>
+              </v-btn>
+            </div>
+          </div>
+
+          <v-divider />
+
+          <div class="permission-row permission-row--intercom">
+            <div class="permission-copy">
+              <div class="section-label">Access Intercom</div>
+              <p class="section-description">
+                Choose which authorized people and providers may use HID intercom access.
+              </p>
+            </div>
+            <div class="permission-actions permission-actions--single">
+              <v-btn
+                class="permission-button text-none"
+                variant="outlined"
+                :disabled="!form.onlineMode || !permissionReaderId || permissionState.assignments.length === 0"
+                @click="openPermissionDialog('intercom')"
+              >
+                <span class="permission-count">{{ permissionState.counts.intercom }}</span>
+                <span>Intercom Permissions</span>
+              </v-btn>
+            </div>
+          </div>
+        </div>
       </div>
     </v-card>
 
@@ -222,37 +295,158 @@
       </v-card>
     </v-dialog>
 
+    <v-dialog v-model="permissionDialog" max-width="680" persistent>
+      <v-card class="permission-dialog">
+        <v-card-title class="permission-dialog__header">
+          <div>
+            <div class="permission-dialog__title">{{ permissionDialogTitle }}</div>
+            <div class="permission-dialog__subtitle">{{ permissionDialogDescription }}</div>
+          </div>
+          <v-btn
+            icon="mdi-close"
+            variant="text"
+            density="comfortable"
+            aria-label="Close permission dialog"
+            @click="closePermissionDialog"
+          />
+        </v-card-title>
+
+        <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"
+            density="compact"
+            hide-details
+            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" />
+              <span>Loading permissions...</span>
+            </div>
+
+            <template v-else-if="visiblePermissionCandidates.length">
+              <label
+                v-for="candidate in visiblePermissionCandidates"
+                :key="`${candidate.category}:${candidate.subjectId}`"
+                class="permission-list-item"
+                :class="{ 'permission-list-item--selected': selectedPermissionIds.has(candidate.subjectId) }"
+              >
+                <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>
+
+            <div v-else class="permission-empty">
+              <v-icon icon="mdi-account-search-outline" size="30" />
+              <span>{{ permissionEmptyMessage }}</span>
+            </div>
+          </div>
+        </v-card-text>
+
+        <v-card-actions class="permission-dialog__actions">
+          <v-btn class="text-none" variant="text" @click="closePermissionDialog">Cancel</v-btn>
+          <v-btn
+            class="text-none save-button"
+            variant="flat"
+            min-width="140"
+            :loading="savingPermissions"
+            :disabled="loadingPermissionCandidates"
+            @click="savePermissions"
+          >
+            Save Permissions
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
   </section>
 </template>
 
 <script setup lang="ts">
-type HidQrConfig = {
-  enabled: boolean;
-  readerId: string;
-  qrFormat: "0" | "1" | "2";
-  printer: {
-    vendorId: string;
-    productId: string;
-  };
-  template: {
-    header: string;
-    subtext: string;
+type HidIdentificationMethod = keyof NonNullable<THidQrCodePassConfig["identificationMethods"]>;
+
+type HidQrConfig = Omit<
+  THidQrCodePassConfig,
+  "identificationMethods" | "onlineMode" | "updatedAt"
+> & {
+  onlineMode: boolean;
+  identificationMethods: Record<HidIdentificationMethod, boolean>;
+};
+
+type HidReaderOption = {
+  _id: string;
+  name?: string;
+  deviceId?: string;
+  location?: string;
+};
+
+type HidReaderListResponse = {
+  items?: HidReaderOption[];
+  readers?: HidReaderOption[];
+  data?: {
+    items?: HidReaderOption[];
+    readers?: HidReaderOption[];
   };
-  validityMinutes: number | null;
 };
 
 const props = defineProps<{
   site: string;
+  org: string;
 }>();
 
+const runtimeConfig = useRuntimeConfig();
+const isPermissionManager = computed(() => runtimeConfig.public.APP === "security_agency");
+
 const { getSiteById, updateSitebyId } = useSiteSettings();
-const { getReaders, setReaderConfiguration } = useHidAmico();
+const {
+  getReaders,
+  getReaderConfiguration,
+  setReaderConfiguration,
+  getSitePermissions,
+  getPermissionCandidates,
+  updateSitePermissions,
+} = useHidAmico();
+const {
+  requestDevice: requestPrinterDevice,
+  testConnection: testPrinterConnection,
+} = useWebUsb();
 
 const defaultConfig: HidQrConfig = {
   enabled: false,
+  onlineMode: false,
   readerId: "",
   qrFormat: "0",
+  identificationMethods: {
+    facial: true,
+    card: true,
+    qrCode: false,
+    idPassword: true,
+    pin: false,
+    bluetooth: false,
+  },
   printer: {
     vendorId: "",
     productId: "",
@@ -264,36 +458,111 @@ const defaultConfig: HidQrConfig = {
   validityMinutes: null,
 };
 
-const siteData = ref<Record<string, any> | null>(null);
-const readers = ref<Record<string, any>[]>([]);
+const siteData = ref<TSite | null>(null);
+const readers = ref<HidReaderOption[]>([]);
 const form = reactive<HidQrConfig>(structuredClone(defaultConfig));
 const previewDialog = ref(false);
 const savingSection = ref("");
+const testingPrinter = ref(false);
 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,
+    propertyManagement: 0,
+    serviceProvider: 0,
+    intercom: 0,
+  },
+});
+const permissionDialog = ref(false);
+const permissionReaderId = ref("");
+const permissionDialogCategory = ref<THidPermissionCategory | "intercom">("resident");
+const permissionCandidates = ref<THidPermissionCandidate[]>([]);
+const selectedPermissionIds = ref(new Set<string>());
+const permissionSearch = ref("");
+const loadingPermissionCandidates = ref(false);
+const savingPermissions = ref(false);
 
 const hasPrinterConfig = computed(() =>
   Boolean(form.printer.vendorId && form.printer.productId),
 );
-const readerOptions = computed(() => readers.value.map((reader) => ({
-  title: reader.name || reader.deviceId || reader._id,
-  value: reader._id,
-})));
-const qrFormatOptions = [
-  { title: "Alphanumeric", value: "0" },
-  { title: "Numeric only", value: "1" },
-  { title: "Hexadecimal numeric", value: "2" },
+const identificationMethodOptions: Array<{
+  key: HidIdentificationMethod;
+  label: string;
+}> = [
+  { key: "facial", label: "Facial" },
+  { key: "card", label: "Card" },
+  { key: "qrCode", label: "QR Code" },
+  { key: "idPassword", label: "ID Password" },
+  { key: "pin", label: "PIN" },
+  { key: "bluetooth", label: "Bluetooth" },
+];
+const accessPermissionOptions: Array<{
+  category: THidPermissionCategory;
+  label: string;
+}> = [
+  { category: "resident", label: "Resident" },
+  { category: "property_management", label: "Property Management" },
+  { 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(() =>
   form.validityMinutes ? `${form.validityMinutes} minutes` : "Not set",
 );
+const visiblePermissionCandidates = computed(() => {
+  const search = permissionSearch.value.trim().toLowerCase();
+  if (!search) return permissionCandidates.value;
+  return permissionCandidates.value.filter((candidate) => (
+    candidate.name.toLowerCase().includes(search)
+    || candidate.subtitle?.toLowerCase().includes(search)
+  ));
+});
+const permissionDialogTitle = computed(() => (
+  permissionDialogCategory.value === "intercom"
+    ? "Intercom Permissions"
+    : `${permissionCategoryLabel(permissionDialogCategory.value)} Access Permission`
+));
+const permissionDialogDescription = computed(() => (
+  permissionDialogCategory.value === "intercom"
+    ? `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
+    ? "Add an access permission before assigning intercom access."
+    : "No matching entries found."
+));
 
 watch(
-  () => props.site,
+  () => [props.org, props.site],
   () => loadConfig(),
   { immediate: true },
 );
@@ -305,13 +574,24 @@ async function loadConfig() {
     getSiteById(props.site),
     getReaders({ site: props.site, page: 1, limit: 100 }),
   ]);
-  siteData.value = site;
-  readers.value = readerResponse?.items ?? readerResponse?.data?.items ?? readerResponse?.data?.readers ?? [];
+  siteData.value = site as TSite;
+  const readerList = readerResponse as HidReaderListResponse;
+  readers.value = readerList.items ?? readerList.data?.items ?? readerList.data?.readers ?? [];
   const config = siteData.value?.metadata?.hidQrCodePass || {};
+  const configuredMethods = config.identificationMethods;
   Object.assign(form, {
     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",
+    identificationMethods: {
+      facial: configuredMethods?.facial ?? true,
+      card: configuredMethods?.card ?? true,
+      qrCode: configuredMethods?.qrCode ?? Boolean(config.enabled),
+      idPassword: configuredMethods?.idPassword ?? true,
+      pin: configuredMethods?.pin ?? false,
+      bluetooth: configuredMethods?.bluetooth ?? false,
+    },
     printer: {
       vendorId: String(config.printer?.vendorId || ""),
       productId: String(config.printer?.productId || ""),
@@ -322,15 +602,175 @@ async function loadConfig() {
     },
     validityMinutes: config.validityMinutes ? Number(config.validityMinutes) : null,
   });
+
+  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.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, props.org, permissionReaderId.value);
+    Object.assign(permissionState, response.data);
+  } catch (error: unknown) {
+    console.error("Unable to load HID permissions:", errorConverter(error));
+  }
+}
+
+function permissionCategoryLabel(category: THidPermissionCategory) {
+  return accessPermissionOptions.find((option) => option.category === category)?.label || "Permission";
+}
+
+function permissionCount(category: THidPermissionCategory) {
+  if (category === "property_management") return permissionState.counts.propertyManagement;
+  if (category === "service_provider") return permissionState.counts.serviceProvider;
+  return permissionState.counts.resident;
+}
+
+async function openPermissionDialog(category: THidPermissionCategory | "intercom") {
+  if (!props.org || !permissionReaderId.value) return;
+  permissionDialogCategory.value = category;
+  permissionSearch.value = "";
+  permissionCandidates.value = [];
+  selectedPermissionIds.value = new Set<string>();
+  permissionDialog.value = true;
+  loadingPermissionCandidates.value = true;
+
+  try {
+    const response = await getPermissionCandidates(props.site, {
+      orgId: props.org,
+      readerId: permissionReaderId.value,
+      category,
+      page: 1,
+      limit: 500,
+    });
+    permissionCandidates.value = response.items || [];
+    selectedPermissionIds.value = new Set(
+      permissionCandidates.value
+        .filter((candidate) => category === "intercom" ? candidate.intercom : candidate.selected)
+        .map((candidate) => candidate.subjectId),
+    );
+  } catch (error: unknown) {
+    showMessage(errorConverter(error), "error");
+  } finally {
+    loadingPermissionCandidates.value = false;
+  }
+}
+
+function closePermissionDialog() {
+  if (savingPermissions.value) return;
+  permissionDialog.value = false;
+}
+
+function togglePermissionCandidate(subjectId: string, selected: boolean) {
+  const next = new Set(selectedPermissionIds.value);
+  if (selected) next.add(subjectId);
+  else next.delete(subjectId);
+  selectedPermissionIds.value = next;
+}
+
+async function savePermissions() {
+  const category = permissionDialogCategory.value;
+  let assignments: Array<Pick<THidPermissionAssignment, "subjectId" | "category" | "intercom">>;
+
+  if (category === "intercom") {
+    assignments = permissionState.assignments.map((assignment) => ({
+      subjectId: assignment.subjectId,
+      category: assignment.category,
+      intercom: selectedPermissionIds.value.has(assignment.subjectId),
+    }));
+  } else {
+    const retained = permissionState.assignments
+      .filter((assignment) => assignment.category !== category)
+      .map((assignment) => ({
+        subjectId: assignment.subjectId,
+        category: assignment.category,
+        intercom: assignment.intercom,
+      }));
+    const selected = permissionCandidates.value
+      .filter((candidate) => selectedPermissionIds.value.has(candidate.subjectId))
+      .map((candidate) => ({
+        subjectId: candidate.subjectId,
+        category: candidate.category,
+        intercom: candidate.intercom,
+      }));
+    assignments = [...retained, ...selected];
+  }
+
+  savingPermissions.value = true;
+  try {
+    const response = await updateSitePermissions(
+      props.site,
+      props.org,
+      permissionReaderId.value,
+      assignments,
+    );
+    Object.assign(permissionState, response.data);
+    permissionDialog.value = false;
+    showMessage("HID permissions updated.", "success");
+  } catch (error: unknown) {
+    showMessage(errorConverter(error), "error");
+  } finally {
+    savingPermissions.value = false;
+  }
+}
+
+function isUnknownRecord(value: unknown): value is Record<string, unknown> {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+
+function getConfigurationData(response: unknown) {
+  if (!isUnknownRecord(response)) return {};
+  return isUnknownRecord(response.data) ? response.data : response;
+}
+
+function isEnabledConfiguration(value: unknown) {
+  return value === true || value === 1 || value === "1";
+}
+
+async function loadReaderConfiguration() {
+  if (!form.readerId) return;
+
+  try {
+    const response = await getReaderConfiguration(form.readerId, {
+      general: ["online"],
+    });
+    const configuration = getConfigurationData(response);
+    const general = isUnknownRecord(configuration.general) ? configuration.general : {};
+
+    if (general.online !== undefined) {
+      form.onlineMode = isEnabledConfiguration(general.online);
+    }
+  } catch (error: unknown) {
+    console.warn("Unable to load HID reader configuration:", errorConverter(error));
+  }
 }
 
 function buildPayload() {
   const metadata = {
     ...(siteData.value?.metadata || {}),
     hidQrCodePass: {
-      enabled: form.enabled,
+      enabled: form.identificationMethods.qrCode,
+      onlineMode: form.onlineMode,
       readerId: form.readerId,
       qrFormat: form.qrFormat,
+      identificationMethods: { ...form.identificationMethods },
       printer: {
         vendorId: form.printer.vendorId.trim(),
         productId: form.printer.productId.trim(),
@@ -352,17 +792,45 @@ async function saveSection(section: string) {
 
   savingSection.value = section;
   try {
-    if (section === "qr-format") {
-      await setReaderConfiguration(form.readerId, {
-        face_id: {
-          qrcode_legacy_mode_enabled: form.qrFormat,
-        },
-      });
-    }
     await updateSitebyId(props.site, buildPayload());
     await loadConfig();
-    showMessage("HID QR code settings saved.", "success");
-  } catch (error: any) {
+    showMessage("HID configuration saved.", "success");
+  } catch (error: unknown) {
+    showMessage(errorConverter(error), "error");
+  } finally {
+    savingSection.value = "";
+  }
+}
+
+async function saveOnlineMode() {
+  if (!props.site || !form.readerId) return;
+
+  savingSection.value = "online-mode";
+  try {
+    await setReaderConfiguration(form.readerId, {
+      general: { online: form.onlineMode ? "1" : "0" },
+    });
+    await updateSitebyId(props.site, buildPayload());
+    showMessage("Online mode updated.", "success");
+  } catch (error: unknown) {
+    await loadConfig();
+    showMessage(errorConverter(error), "error");
+  } finally {
+    savingSection.value = "";
+  }
+}
+
+async function saveIdentificationMethod(method: HidIdentificationMethod) {
+  if (!props.site) return;
+
+  form.enabled = form.identificationMethods.qrCode;
+
+  savingSection.value = `method-${method}`;
+  try {
+    await updateSitebyId(props.site, buildPayload());
+    showMessage(`${identificationMethodOptions.find((item) => item.key === method)?.label || "Identification method"} updated.`, "success");
+  } catch (error: unknown) {
+    await loadConfig();
     showMessage(errorConverter(error), "error");
   } finally {
     savingSection.value = "";
@@ -376,19 +844,36 @@ async function scanPrinter() {
   }
 
   try {
-    const device = await (navigator as any).usb.requestDevice({ filters: [] });
+    const device = await requestPrinterDevice();
     form.printer.vendorId = `0x${Number(device.vendorId).toString(16).padStart(4, "0")}`;
     form.printer.productId = `0x${Number(device.productId).toString(16).padStart(4, "0")}`;
     showMessage("Printer selected. Save settings to keep it.", "success");
-  } catch (error: any) {
-    if (error?.name !== "NotFoundError") {
-      showMessage(error?.message || "Unable to scan printer.", "error");
+  } catch (error: unknown) {
+    const message = errorConverter(error);
+    if (message !== "No device selected") {
+      showMessage(message || "Unable to scan printer.", "error");
     }
   }
 }
 
-function testPrint() {
-  showMessage("Printer settings are ready. Connect print command when HID QR payload generation is available.", "success");
+async function testPrint() {
+  const vendorId = Number(form.printer.vendorId);
+  const productId = Number(form.printer.productId);
+  if (!vendorId || !productId) {
+    showMessage("Please scan a valid USB printer first.", "error");
+    return;
+  }
+
+  testingPrinter.value = true;
+  try {
+    const result = await testPrinterConnection(vendorId, productId);
+    showMessage(
+      result.success ? result.message : result.error || result.message,
+      result.success ? "success" : "error",
+    );
+  } finally {
+    testingPrinter.value = false;
+  }
 }
 
 function showMessage(text: string, color: string) {
@@ -432,15 +917,15 @@ function showMessage(text: string, color: string) {
   padding: 30px 38px;
 }
 
-.section-head {
+.online-mode-row {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: space-between;
   gap: 24px;
-  margin-bottom: 24px;
+  padding: 0 0 20px;
 }
 
-.section-head h3,
+.online-mode-row h3,
 .section-label {
   margin: 0 0 6px;
   color: #233545;
@@ -448,16 +933,83 @@ function showMessage(text: string, color: string) {
   font-weight: 700;
 }
 
-.section-head p {
+.online-mode-row p,
+.section-description {
   margin: 0;
   color: #677280;
   font-size: 12px;
+  line-height: 1.5;
 }
 
 .form-section {
   padding: 16px 0;
 }
 
+.identification-section {
+  padding-bottom: 20px;
+}
+
+.methods-grid {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(120px, 1fr));
+  gap: 18px;
+  margin-top: 16px;
+}
+
+.method-control {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
+  min-height: 42px;
+  padding: 0 10px 0 14px;
+  border: 1px solid #dce2e7;
+  border-radius: 6px;
+  color: #334454;
+  font-size: 12px;
+}
+
+.method-control span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.method-control--disabled {
+  background-color: #f5f6f7;
+  color: #8b9297;
+}
+
+.method-control :deep(.v-switch) {
+  flex: 0 0 auto;
+}
+
+.method-control :deep(.v-selection-control) {
+  min-height: 32px;
+}
+
+.hid-config-switch :deep(.v-switch__track) {
+  background-color: #8b9297;
+  opacity: 1;
+}
+
+.hid-config-switch :deep(.v-selection-control--dirty .v-switch__track) {
+  background-color: #2eaf55 !important;
+  color: #2eaf55 !important;
+  opacity: 1;
+}
+
+.hid-config-switch :deep(.v-switch__thumb) {
+  background-color: #fff !important;
+  color: #fff !important;
+}
+
+.hid-config-switch.v-input--disabled :deep(.v-switch__track) {
+  background-color: #aeb4b8 !important;
+  color: #aeb4b8 !important;
+  opacity: 1;
+}
+
 .printer-grid {
   display: grid;
   grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) minmax(140px, 1fr) minmax(140px, 1fr) minmax(140px, 1fr);
@@ -483,6 +1035,231 @@ function showMessage(text: string, color: string) {
   align-items: center;
 }
 
+.permission-section {
+  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);
+  gap: 36px;
+  align-items: center;
+  padding: 18px 0;
+}
+
+.permission-row--intercom {
+  padding-bottom: 4px;
+}
+
+.permission-copy {
+  min-width: 0;
+}
+
+.permission-actions {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(150px, 1fr));
+  gap: 12px;
+}
+
+.permission-actions--single {
+  grid-template-columns: minmax(180px, 240px);
+  justify-content: end;
+}
+
+.permission-button {
+  justify-content: flex-start;
+  min-height: 42px;
+  padding-inline: 12px;
+  border-color: #dce2e7;
+  color: #334454;
+}
+
+.permission-count {
+  display: inline-grid;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  margin-right: 8px;
+  border-radius: 50%;
+  background: #dce2e7;
+  color: #526170;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.permission-button:not(:disabled):hover {
+  border-color: #1473c9;
+  color: #0a5da7;
+}
+
+.permission-dialog {
+  overflow: hidden;
+  border-radius: 6px;
+}
+
+.permission-dialog__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 16px 18px 14px;
+  border-bottom: 1px solid #e5e9ed;
+}
+
+.permission-dialog__title {
+  color: #172534;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.permission-dialog__subtitle {
+  margin-top: 4px;
+  color: #687583;
+  font-size: 12px;
+  white-space: normal;
+}
+
+.permission-dialog__body {
+  display: grid;
+  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: 180px;
+  max-height: min(360px, 48vh);
+  overflow-y: auto;
+  border: 1px solid #dfe5ea;
+  border-radius: 6px;
+  background: #ffffff;
+}
+
+.permission-list--loading {
+  display: grid;
+  place-items: center;
+}
+
+.permission-list-item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) max-content 32px;
+  gap: 12px;
+  align-items: center;
+  min-height: 56px;
+  padding: 7px 12px;
+  border-bottom: 1px solid #edf0f3;
+  cursor: pointer;
+  transition: background-color 120ms ease;
+}
+
+.permission-list-item:last-child {
+  border-bottom: 0;
+}
+
+.permission-list-item:hover {
+  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;
+}
+
+.permission-list-item__content strong,
+.permission-list-item__content small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.permission-list-item__content strong {
+  color: #243443;
+  font-size: 13px;
+  line-height: 1.35;
+}
+
+.permission-list-item__content small,
+.permission-list-item__group {
+  color: #778391;
+  font-size: 11px;
+}
+
+.permission-list-item__group {
+  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 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  min-height: 180px;
+  padding: 24px;
+  color: #75818c;
+  font-size: 13px;
+  text-align: center;
+}
+
+.permission-dialog__actions {
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 18px;
+  border-top: 1px solid #e5e9ed;
+}
+
 .save-button {
   background: #082e43;
   color: #ffffff;
@@ -592,11 +1369,21 @@ function showMessage(text: string, color: string) {
 }
 
 @media (max-width: 1100px) {
+  .methods-grid {
+    grid-template-columns: repeat(3, minmax(140px, 1fr));
+  }
+
   .printer-grid,
   .template-grid,
-  .validity-grid {
+  .validity-grid,
+  .permission-location,
+  .permission-row {
     grid-template-columns: 1fr 1fr;
   }
+
+  .permission-actions {
+    grid-template-columns: 1fr;
+  }
 }
 
 @media (max-width: 700px) {
@@ -604,15 +1391,40 @@ function showMessage(text: string, color: string) {
     padding: 22px 16px;
   }
 
-  .section-head,
+  .online-mode-row,
   .printer-grid,
   .template-grid,
-  .validity-grid {
+  .validity-grid,
+  .methods-grid,
+  .permission-location,
+  .permission-row,
+  .permission-actions {
     grid-template-columns: 1fr;
   }
 
-  .section-head {
+  .online-mode-row {
     display: grid;
   }
+
+  .permission-actions--single {
+    justify-content: stretch;
+  }
+
+  .permission-list-item {
+    grid-template-columns: minmax(0, 1fr) 32px;
+    gap: 8px;
+  }
+
+  .permission-list-item__group {
+    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>