@7365admin1/layer-common 3.1.4-staging.49 → 3.1.4-staging.51

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,54 @@
             </v-btn>
           </div>
         </div>
+
+        <v-divider />
+
+        <div class="permission-section">
+          <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"
+                @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 || 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,24 +261,109 @@
       </v-card>
     </v-dialog>
 
+    <v-dialog v-model="permissionDialog" max-width="640" 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"
+            prepend-inner-icon="mdi-magnify"
+            placeholder="Search by name or details"
+            variant="outlined"
+            density="compact"
+            hide-details
+            clearable
+          />
+
+          <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"
+              >
+                <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>
+              </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;
+};
+
+type HidReaderListResponse = {
+  items?: HidReaderOption[];
+  readers?: HidReaderOption[];
+  data?: {
+    items?: HidReaderOption[];
+    readers?: HidReaderOption[];
   };
-  validityMinutes: number | null;
 };
 
 const props = defineProps<{
@@ -247,12 +371,32 @@ const props = defineProps<{
 }>();
 
 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,26 +408,54 @@ 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>({
+  site: props.site,
+  assignments: [],
+  counts: {
+    resident: 0,
+    propertyManagement: 0,
+    serviceProvider: 0,
+    intercom: 0,
+  },
+});
+const permissionDialog = ref(false);
+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 siteName = computed(() => siteData.value?.name || "Site");
@@ -291,6 +463,29 @@ const siteLabel = computed(() => siteData.value?.code || siteData.value?.block |
 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."
+    : `Select the ${permissionCategoryLabel(permissionDialogCategory.value).toLowerCase()} entries allowed to use HID access at this site.`
+));
+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,
@@ -305,13 +500,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 +528,150 @@ async function loadConfig() {
     },
     validityMinutes: config.validityMinutes ? Number(config.validityMinutes) : null,
   });
+
+  await Promise.all([loadReaderConfiguration(), loadPermissions()]);
+}
+
+async function loadPermissions() {
+  if (!props.site) return;
+  try {
+    const response = await getSitePermissions(props.site);
+    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") {
+  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, {
+      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, 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 +693,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 +745,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 +818,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 +834,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 +936,177 @@ function showMessage(text: string, color: string) {
   align-items: center;
 }
 
+.permission-section {
+  padding-top: 2px;
+}
+
+.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: 20px;
+  padding: 20px 22px 16px;
+  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: 16px;
+  padding: 18px 22px;
+}
+
+.permission-list {
+  min-height: 240px;
+  max-height: 390px;
+  overflow-y: auto;
+  border: 1px solid #dfe5ea;
+  border-radius: 6px;
+}
+
+.permission-list--loading {
+  display: grid;
+  place-items: center;
+}
+
+.permission-list-item {
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: center;
+  min-height: 62px;
+  padding: 8px 14px 8px 8px;
+  border-bottom: 1px solid #edf0f3;
+  cursor: pointer;
+}
+
+.permission-list-item:last-child {
+  border-bottom: 0;
+}
+
+.permission-list-item:hover {
+  background: #f7fafc;
+}
+
+.permission-list-item__content {
+  display: grid;
+  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;
+}
+
+.permission-list-item__content small,
+.permission-list-item__group {
+  color: #778391;
+  font-size: 11px;
+}
+
+.permission-list-item__group {
+  padding: 4px 8px;
+  border-radius: 4px;
+  background: #eef2f5;
+}
+
+.permission-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  min-height: 240px;
+  padding: 24px;
+  color: #75818c;
+  font-size: 13px;
+  text-align: center;
+}
+
+.permission-dialog__actions {
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 14px 22px;
+  border-top: 1px solid #e5e9ed;
+}
+
 .save-button {
   background: #082e43;
   color: #ffffff;
@@ -592,11 +1216,20 @@ 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-row {
     grid-template-columns: 1fr 1fr;
   }
+
+  .permission-actions {
+    grid-template-columns: 1fr;
+  }
 }
 
 @media (max-width: 700px) {
@@ -604,15 +1237,30 @@ 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-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: 34px minmax(0, 1fr);
+  }
+
+  .permission-list-item__group {
+    display: none;
+  }
 }
 </style>