@7365admin1/layer-common 3.1.4-staging.53 → 3.2.0

package/components/HidQrCodeConfiguration.vue

@@ -9,55 +9,65 @@
       </div>
 
       <div class="config-body">
-        <div class="online-mode-row">
+        <div class="section-head">
           <div>
-            <h3>Activate Online Mode</h3>
-            <p>Enables real-time server communication, synchronizing live credential verification and access data across the network.</p>
+            <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>
           </div>
           <v-switch
-            v-model="form.onlineMode"
-            class="hid-config-switch"
+            v-model="form.enabled"
             color="success"
             hide-details
             inset
-            :loading="savingSection === 'online-mode'"
-            :disabled="Boolean(savingSection) || !form.readerId"
-            @update:model-value="saveOnlineMode"
+            :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"
           />
         </div>
 
         <v-divider />
 
-        <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 }"
+        <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')"
             >
-              <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>
+              Save Format
+            </v-btn>
           </div>
         </div>
 
-        <v-divider />
-
         <div class="form-section">
           <div class="section-label">Printer Setup</div>
           <div class="printer-grid">
@@ -89,7 +99,6 @@
               variant="outlined"
               prepend-icon="mdi-printer-check"
               height="40"
-              :loading="testingPrinter"
               :disabled="!hasPrinterConfig"
               @click="testPrint"
             >
@@ -175,54 +184,6 @@
             </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>
 
@@ -261,109 +222,24 @@
       </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 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[];
+type HidQrConfig = {
+  enabled: boolean;
+  readerId: string;
+  qrFormat: "0" | "1" | "2";
+  printer: {
+    vendorId: string;
+    productId: string;
+  };
+  template: {
+    header: string;
+    subtext: string;
   };
+  validityMinutes: number | null;
 };
 
 const props = defineProps<{
@@ -371,32 +247,12 @@ const props = defineProps<{
 }>();
 
 const { getSiteById, updateSitebyId } = useSiteSettings();
-const {
-  getReaders,
-  getReaderConfiguration,
-  setReaderConfiguration,
-  getSitePermissions,
-  getPermissionCandidates,
-  updateSitePermissions,
-} = useHidAmico();
-const {
-  requestDevice: requestPrinterDevice,
-  testConnection: testPrinterConnection,
-} = useWebUsb();
+const { getReaders, setReaderConfiguration } = useHidAmico();
 
 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: "",
@@ -408,54 +264,26 @@ const defaultConfig: HidQrConfig = {
   validityMinutes: null,
 };
 
-const siteData = ref<TSite | null>(null);
-const readers = ref<HidReaderOption[]>([]);
+const siteData = ref<Record<string, any> | null>(null);
+const readers = ref<Record<string, any>[]>([]);
 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 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 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 siteName = computed(() => siteData.value?.name || "Site");
@@ -463,29 +291,6 @@ 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,
@@ -500,24 +305,13 @@ async function loadConfig() {
     getSiteById(props.site),
     getReaders({ site: props.site, page: 1, limit: 100 }),
   ]);
-  siteData.value = site as TSite;
-  const readerList = readerResponse as HidReaderListResponse;
-  readers.value = readerList.items ?? readerList.data?.items ?? readerList.data?.readers ?? [];
+  siteData.value = site;
+  readers.value = readerResponse?.items ?? readerResponse?.data?.items ?? readerResponse?.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 || ""),
@@ -528,150 +322,15 @@ 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.identificationMethods.qrCode,
-      onlineMode: form.onlineMode,
+      enabled: form.enabled,
       readerId: form.readerId,
       qrFormat: form.qrFormat,
-      identificationMethods: { ...form.identificationMethods },
       printer: {
         vendorId: form.printer.vendorId.trim(),
         productId: form.printer.productId.trim(),
@@ -693,45 +352,17 @@ 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 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("HID QR code settings saved.", "success");
+  } catch (error: any) {
     showMessage(errorConverter(error), "error");
   } finally {
     savingSection.value = "";
@@ -745,36 +376,19 @@ async function scanPrinter() {
   }
 
   try {
-    const device = await requestPrinterDevice();
+    const device = await (navigator as any).usb.requestDevice({ filters: [] });
     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: unknown) {
-    const message = errorConverter(error);
-    if (message !== "No device selected") {
-      showMessage(message || "Unable to scan printer.", "error");
+  } catch (error: any) {
+    if (error?.name !== "NotFoundError") {
+      showMessage(error?.message || "Unable to scan printer.", "error");
     }
   }
 }
 
-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 testPrint() {
+  showMessage("Printer settings are ready. Connect print command when HID QR payload generation is available.", "success");
 }
 
 function showMessage(text: string, color: string) {
@@ -818,15 +432,15 @@ function showMessage(text: string, color: string) {
   padding: 30px 38px;
 }
 
-.online-mode-row {
+.section-head {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
   gap: 24px;
-  padding: 0 0 20px;
+  margin-bottom: 24px;
 }
 
-.online-mode-row h3,
+.section-head h3,
 .section-label {
   margin: 0 0 6px;
   color: #233545;
@@ -834,83 +448,16 @@ function showMessage(text: string, color: string) {
   font-weight: 700;
 }
 
-.online-mode-row p,
-.section-description {
+.section-head p {
   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);
@@ -936,177 +483,6 @@ 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;
@@ -1216,20 +592,11 @@ 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,
-  .permission-row {
+  .validity-grid {
     grid-template-columns: 1fr 1fr;
   }
-
-  .permission-actions {
-    grid-template-columns: 1fr;
-  }
 }
 
 @media (max-width: 700px) {
@@ -1237,30 +604,15 @@ function showMessage(text: string, color: string) {
     padding: 22px 16px;
   }
 
-  .online-mode-row,
+  .section-head,
   .printer-grid,
   .template-grid,
-  .validity-grid,
-  .methods-grid,
-  .permission-row,
-  .permission-actions {
+  .validity-grid {
     grid-template-columns: 1fr;
   }
 
-  .online-mode-row {
+  .section-head {
     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>