@7365admin1/layer-common 3.2.7 → 3.2.8-staging.201

package/components/HidQrCodeConfiguration.vue

@@ -1,203 +1,229 @@
+<!--
+  HID QR CODE CONFIGURATION - the reader's own settings, inside Site Settings.
+
+  It is mounted in `SiteSettings.vue`'s "HID Face Reader" expansion panel, next
+  to `HidServiceSettingsPanel`, so it takes the shape the handoff gives a
+  settings module BODY: section labels at 13px/700, explanatory lines at
+  12-13px/600 in `--muted`, the 38x22 toggle, 40px fields and 38px buttons.
+
+  Two pieces of legacy chrome are gone rather than restyled:
+    * the `#082e43` navy title bar. The design puts NO card inside an accordion
+      body - the accordion head ("HID Face Reader") is the card, and a second
+      titled panel inside it is a header the design does not draw. Its title is
+      kept as the body's first section label.
+    * the chevron button that sat on that bar. It had no `@click` and no model:
+      it looked like a collapse control and did nothing.
+
+  Every field, toggle, dialog, handler and save call is otherwise unchanged.
+-->
 <template>
   <section class="hid-qr-config">
-    <v-card flat class="config-panel">
-      <div class="panel-header">
+    <div class="config-body">
+      <div class="section-label config-body__title">HID Configuration</div>
+
+      <div class="online-mode-row">
         <div>
-          <h2>HID Configuration</h2>
+          <h3>Activate Online Mode</h3>
+          <p>Enables real-time server communication, synchronizing live credential verification and access data across the network.</p>
         </div>
-        <v-btn icon="mdi-chevron-up" variant="text" density="comfortable" />
+        <v-switch
+          v-model="form.onlineMode"
+          class="app-switch"
+          hide-details
+          :loading="savingSection === 'online-mode'"
+          :disabled="Boolean(savingSection) || !form.readerId"
+          @update:model-value="saveOnlineMode"
+        />
       </div>
 
-      <div class="config-body">
-        <div class="section-head">
-          <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>
+      <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 }"
+          >
+            <span>{{ method.label }}</span>
+            <v-switch
+              v-model="form.identificationMethods[method.key]"
+              class="app-switch"
+              hide-details
+              density="compact"
+              :loading="savingSection === `method-${method.key}`"
+              :disabled="Boolean(savingSection) || !form.onlineMode"
+              @update:model-value="saveIdentificationMethod(method.key)"
+            />
           </div>
-          <v-switch
-            v-model="form.enabled"
-            color="success"
-            hide-details
-            inset
-            :loading="savingSection === 'enabled'"
-            @update:model-value="saveSection('enabled')"
-          />
         </div>
+      </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"
-          />
+      <v-divider />
+
+      <div class="form-section">
+        <div class="section-label">Printer Setup</div>
+        <div class="printer-grid">
+          <AppField v-model="form.printer.vendorId" placeholder="Vendor" />
+          <AppField v-model="form.printer.productId" placeholder="Product Id" />
+          <AppButton variant="ghost" icon="mdi-magnify" @click="scanPrinter">
+            Scan Printer
+          </AppButton>
+          <AppButton
+            variant="ghost"
+            icon="mdi-printer-check"
+            :disabled="!hasPrinterConfig || testingPrinter"
+            @click="testPrint"
+          >
+            Test &amp; Print
+          </AppButton>
+          <AppButton
+            icon="mdi-printer"
+            :disabled="savingSection === 'printer'"
+            @click="saveSection('printer')"
+          >
+            Save Settings
+          </AppButton>
         </div>
+      </div>
 
-        <v-divider />
+      <v-divider />
+
+      <div class="form-section">
+        <div class="section-label">HID QR Code Template</div>
+        <div class="template-grid">
+          <AppField v-model="form.template.header" placeholder="Header" />
+          <AppField v-model="form.template.subtext" placeholder="Subtext" />
+          <AppButton variant="ghost" icon="mdi-eye" @click="previewDialog = true">
+            Preview
+          </AppButton>
+          <AppButton
+            icon="mdi-qrcode-scan"
+            :disabled="savingSection === 'template'"
+            @click="saveSection('template')"
+          >
+            Save
+          </AppButton>
+        </div>
+      </div>
 
-        <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')"
-            >
-              Save Format
-            </v-btn>
-          </div>
+      <v-divider />
+
+      <div class="form-section">
+        <div class="section-label">HID QR Code Validity</div>
+        <div class="validity-grid">
+          <AppField v-model="validityInput" type="number" placeholder="Validity (minutes)" />
+          <AppButton
+            icon="mdi-timer-outline"
+            :disabled="savingSection === 'validity'"
+            @click="saveSection('validity')"
+          >
+            Save
+          </AppButton>
         </div>
+      </div>
 
-        <div class="form-section">
-          <div class="section-label">Printer Setup</div>
-          <div class="printer-grid">
-            <v-text-field
-              v-model="form.printer.vendorId"
-              placeholder="Vendor"
-              variant="outlined"
-              density="compact"
-              hide-details
-            />
-            <v-text-field
-              v-model="form.printer.productId"
-              placeholder="Product Id"
-              variant="outlined"
-              density="compact"
-              hide-details
-            />
-            <v-btn
-              class="text-none utility-button"
-              variant="outlined"
-              prepend-icon="mdi-magnify"
-              height="40"
-              @click="scanPrinter"
-            >
-              Scan Printer
-            </v-btn>
-            <v-btn
-              class="text-none test-button"
-              variant="outlined"
-              prepend-icon="mdi-printer-check"
-              height="40"
-              :disabled="!hasPrinterConfig"
-              @click="testPrint"
-            >
-              Test & Print
-            </v-btn>
-            <v-btn
-              class="text-none save-button"
-              variant="flat"
-              prepend-icon="mdi-printer"
-              height="40"
-              :loading="savingSection === 'printer'"
-              @click="saveSection('printer')"
-            >
-              Save Settings
-            </v-btn>
+      <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>
+          <AppSelect
+            v-model="permissionReaderId"
+            class="permission-location__select"
+            :items="permissionLocations"
+            item-title="label"
+            item-value="readerId"
+            placeholder="Select a Face Reader location"
+            :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="form-section">
-          <div class="section-label">HID QR Code Template</div>
-          <div class="template-grid">
-            <v-text-field
-              v-model="form.template.header"
-              placeholder="Header"
-              variant="outlined"
-              density="compact"
-              hide-details
-            />
-            <v-text-field
-              v-model="form.template.subtext"
-              placeholder="Subtext"
-              variant="outlined"
-              density="compact"
-              hide-details
-            />
-            <v-btn
-              class="text-none preview-button"
-              variant="flat"
-              prepend-icon="mdi-eye"
-              height="40"
-              @click="previewDialog = true"
-            >
-              Preview
-            </v-btn>
-            <v-btn
-              class="text-none save-button"
-              variant="flat"
-              prepend-icon="mdi-qrcode-scan"
-              height="40"
-              :loading="savingSection === 'template'"
-              @click="saveSection('template')"
+        <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">
+            <AppButton
+              v-for="option in accessPermissionOptions"
+              :key="option.category"
+              variant="ghost"
+              class="permission-button"
+              :disabled="!form.onlineMode || !permissionReaderId"
+              @click="openPermissionDialog(option.category)"
             >
-              Save
-            </v-btn>
+              <span class="permission-count">{{ permissionCount(option.category) }}</span>
+              <span>{{ option.label }}</span>
+            </AppButton>
           </div>
         </div>
 
         <v-divider />
 
-        <div class="form-section">
-          <div class="section-label">HID QR Code Validity</div>
-          <div class="validity-grid">
-            <v-text-field
-              v-model.number="form.validityMinutes"
-              placeholder="Validity (minutes)"
-              variant="outlined"
-              density="compact"
-              hide-details
-              min="1"
-              type="number"
-            />
-            <v-btn
-              class="text-none save-button"
-              variant="flat"
-              prepend-icon="mdi-timer-outline"
-              height="40"
-              :loading="savingSection === 'validity'"
-              @click="saveSection('validity')"
+        <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">
+            <AppButton
+              variant="ghost"
+              class="permission-button"
+              :disabled="!form.onlineMode || !permissionReaderId || permissionState.assignments.length === 0"
+              @click="openPermissionDialog('intercom')"
             >
-              Save
-            </v-btn>
+              <span class="permission-count">{{ permissionState.counts.intercom }}</span>
+              <span>Intercom Permissions</span>
+            </AppButton>
           </div>
         </div>
       </div>
-    </v-card>
+    </div>
 
     <v-dialog v-model="previewDialog" max-width="420">
       <v-card class="preview-shell">
-        <v-btn
+        <AppButton
+          variant="icon"
           class="preview-close"
           icon="mdi-close"
-          variant="text"
-          density="comfortable"
           @click="previewDialog = false"
         />
         <v-card-text>
           <div class="preview-title">QR code Preview</div>
+          <!--
+            THE PRINTED PASS. Deliberately NOT themed: this is a preview of a
+            piece of card that comes out of a printer, so it is white with black
+            ink on both themes, the way the physical pass is. Everything AROUND
+            it sits on the dialog scrim, which is dark in both themes.
+          -->
           <div class="pass-preview">
             <div class="pass-heading">{{ form.template.header || "Header" }}</div>
             <div class="pass-subtext">{{ form.template.subtext || "Subtext" }}</div>
@@ -222,37 +248,148 @@
       </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>
+          <AppButton
+            variant="icon"
+            icon="mdi-close"
+            aria-label="Close permission dialog"
+            @click="closePermissionDialog"
+          />
+        </v-card-title>
+
+        <v-card-text class="permission-dialog__body">
+          <AppField
+            v-model="permissionSearch"
+            search
+            placeholder="Search by name or details"
+          />
+
+          <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 class="permission-spinner" 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}`"
+                  @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">
+          <AppButton variant="ghost" @click="closePermissionDialog">Cancel</AppButton>
+          <AppButton
+            :disabled="loadingPermissionCandidates || savingPermissions"
+            @click="savePermissions"
+          >
+            Save Permissions
+          </AppButton>
+        </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 +401,123 @@ 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" },
+];
+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",
 );
 
+/**
+ * `AppField` is a native `<input>` and its model is a string, where
+ * `form.validityMinutes` is a `number | null` on the config type. This keeps
+ * the field's value exactly the number `v-model.number` used to put there -
+ * empty stays `null`, not `NaN` and not `""`.
+ */
+const validityInput = computed({
+  get: () => (form.validityMinutes === null || form.validityMinutes === undefined ? "" : String(form.validityMinutes)),
+  set: (value: string) => {
+    form.validityMinutes = value === "" ? null : Number(value);
+  },
+});
+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 +529,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",
+    qrFormat: "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: false,
+    },
     printer: {
       vendorId: String(config.printer?.vendorId || ""),
       productId: String(config.printer?.productId || ""),
@@ -322,15 +557,192 @@ 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"],
+      identifier: [
+        "card_identification_enabled",
+        "pin_identification_enabled",
+        "multi_factor_authentication",
+      ],
+    });
+    const configuration = getConfigurationData(response);
+    const general = isUnknownRecord(configuration.general) ? configuration.general : {};
+    const identifier = isUnknownRecord(configuration.identifier) ? configuration.identifier : {};
+
+    if (general.online !== undefined) {
+      form.onlineMode = isEnabledConfiguration(general.online);
+    }
+    if (identifier.pin_identification_enabled !== undefined) {
+      const pinEnabled = isEnabledConfiguration(identifier.pin_identification_enabled);
+      form.identificationMethods.pin = pinEnabled;
+      form.identificationMethods.idPassword = !pinEnabled;
+    }
+    if (identifier.card_identification_enabled !== undefined) {
+      form.identificationMethods.card = isEnabledConfiguration(
+        identifier.card_identification_enabled,
+      );
+    }
+  } 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,
+      // Visitor QR passes always use Amico alphanumeric qrcodes.
+      qrFormat: "0",
+      identificationMethods: { ...form.identificationMethods },
       printer: {
         vendorId: form.printer.vendorId.trim(),
         productId: form.printer.productId.trim(),
@@ -352,17 +764,65 @@ async function saveSection(section: string) {
 
   savingSection.value = section;
   try {
-    if (section === "qr-format") {
+    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 {
+    if (method === "card") {
       await setReaderConfiguration(form.readerId, {
-        face_id: {
-          qrcode_legacy_mode_enabled: form.qrFormat,
+        identifier: {
+          card_identification_enabled: form.identificationMethods.card ? "1" : "0",
+        },
+      });
+    } else if (method === "pin" || method === "idPassword") {
+      if (method === "pin" && form.identificationMethods.pin) {
+        form.identificationMethods.idPassword = false;
+      } else if (method === "idPassword" && form.identificationMethods.idPassword) {
+        form.identificationMethods.pin = false;
+      }
+      await setReaderConfiguration(form.readerId, {
+        identifier: {
+          pin_identification_enabled: form.identificationMethods.pin ? "1" : "0",
+          // Mode 1: PIN is an alternative credential, never a second factor.
+          multi_factor_authentication: "0",
         },
       });
     }
     await updateSitebyId(props.site, buildPayload());
+    showMessage(`${identificationMethodOptions.find((item) => item.key === method)?.label || "Identification method"} updated.`, "success");
+  } catch (error: unknown) {
     await loadConfig();
-    showMessage("HID QR code settings saved.", "success");
-  } catch (error: any) {
     showMessage(errorConverter(error), "error");
   } finally {
     savingSection.value = "";
@@ -376,19 +836,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) {
@@ -398,71 +875,121 @@ function showMessage(text: string, color: string) {
 }
 </script>
 
+
 <style scoped>
+/*
+  EVERY COLOUR IS A TOKEN NOW.
+
+  This file carried 38 distinct literal hexes - a navy `#082e43` bar, greens
+  `#2eaf55` / `#35b84b` / `#34b84a` / `#2da643`, greys `#233545` / `#677280` /
+  `#334454` / `#8b9297` / `#dce2e7` / `#e6eaee` and a dozen more. A literal is
+  the same colour on both themes, which is why this screen had no dark theme at
+  all. The LAYOUT (the grids, the breakpoints, the 42px method boxes) is the
+  screen's own and is kept; only the palette moved.
+
+  The one deliberate exception is `.pass-preview` - see the template comment.
+*/
 .hid-qr-config {
   width: 100%;
   min-width: 0;
   padding: 8px 0 28px;
 }
 
-.config-panel {
-  border: 1px solid #e6eaee;
-  border-radius: 6px;
-  overflow: hidden;
-  background: #ffffff;
-}
-
-.panel-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 48px;
-  padding: 0 18px;
-  background: #082e43;
-  color: #ffffff;
-}
-
-.panel-header h2 {
-  margin: 0;
-  font-size: 13px;
-  font-weight: 700;
+.config-body {
+  padding: 4px 0 0;
 }
 
-.config-body {
-  padding: 30px 38px;
+.config-body__title {
+  margin-bottom: 14px;
 }
 
-.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,
+/* The prototype's settings body: a 13px/700 label over a 12-13px/600 muted
+   line. */
+.online-mode-row h3,
 .section-label {
   margin: 0 0 6px;
-  color: #233545;
+  color: var(--text);
+  font-family: var(--font-sans);
   font-size: 13px;
   font-weight: 700;
 }
 
-.section-head p {
+.online-mode-row p,
+.section-description {
   margin: 0;
-  color: #677280;
+  color: var(--muted);
+  font-family: var(--font-sans);
   font-size: 12px;
+  font-weight: 600;
+  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 var(--border);
+  border-radius: var(--r-inner);
+  color: var(--text2);
+  font-family: var(--font-sans);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.method-control span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.method-control--disabled {
+  background-color: var(--hover);
+  color: var(--muted);
+}
+
+.method-control :deep(.v-switch) {
+  flex: 0 0 auto;
+}
+
+.method-control :deep(.v-selection-control) {
+  min-height: 32px;
+}
+
+/* The three `.hid-config-switch` rules are gone: `.app-switch` in
+   primitives.css is the handoff's toggle, and it is shared with the other two
+   HID panels that have one. */
+
 .printer-grid {
   display: grid;
   grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) minmax(140px, 1fr) minmax(140px, 1fr) minmax(140px, 1fr);
   gap: 14px;
-  align-items: center;
+  align-items: end;
 }
 
 .template-grid {
@@ -471,37 +998,249 @@ function showMessage(text: string, color: string) {
   gap: 14px;
 }
 
-.template-grid .preview-button,
-.template-grid .save-button {
-  width: 100%;
-}
-
 .validity-grid {
   display: grid;
   grid-template-columns: minmax(180px, 260px) minmax(140px, 260px);
   gap: 14px;
+  align-items: end;
+}
+
+.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;
 }
 
-.save-button {
-  background: #082e43;
-  color: #ffffff;
+.permission-location__select {
+  width: 100%;
 }
 
-.preview-button {
-  background: #35b84b;
-  color: #ffffff;
+.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;
 }
 
-.test-button {
-  border-color: #34b84a;
-  color: #2da643;
+.permission-actions {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(150px, 1fr));
+  gap: 12px;
 }
 
-.utility-button {
-  color: #1f3448;
+.permission-actions--single {
+  grid-template-columns: minmax(180px, 240px);
+  justify-content: end;
 }
 
+/* A ghost button carrying a count badge. `AppButton --ghost` supplies the
+   height, radius, border and type; only the alignment is local. */
+.permission-button {
+  justify-content: flex-start;
+  min-height: 42px;
+}
+
+.permission-count {
+  display: inline-grid;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  margin-right: 8px;
+  border-radius: 50%;
+  background: var(--accent-soft);
+  color: var(--accent-text);
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.permission-button:not(:disabled):hover {
+  border-color: var(--accent);
+  color: var(--accent-text);
+}
+
+.permission-dialog {
+  overflow: hidden;
+  border-radius: var(--r-modal);
+  background: var(--card);
+}
+
+.permission-dialog__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 16px 18px 14px;
+  border-bottom: 1px solid var(--border);
+}
+
+.permission-dialog__title {
+  color: var(--text);
+  font-family: var(--font-sans);
+  font-size: 18px;
+  font-weight: 800;
+}
+
+.permission-dialog__subtitle {
+  margin-top: 4px;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 600;
+  white-space: normal;
+}
+
+.permission-dialog__body {
+  display: grid;
+  gap: 10px;
+  padding: 14px 18px 16px;
+}
+
+.permission-list-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 22px;
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.permission-list-summary__selected {
+  color: var(--ok);
+  font-weight: 700;
+}
+
+.permission-list {
+  min-height: 180px;
+  max-height: min(360px, 48vh);
+  overflow-y: auto;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  background: var(--card);
+}
+
+.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 var(--border);
+  cursor: pointer;
+  transition: background-color var(--motion) ease;
+}
+
+.permission-list-item:last-child {
+  border-bottom: 0;
+}
+
+.permission-list-item:hover {
+  background: var(--hover);
+}
+
+.permission-list-item--selected,
+.permission-list-item--selected:hover {
+  background: var(--accent-soft);
+}
+
+.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: var(--text);
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.permission-list-item__content small,
+.permission-list-item__group {
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.permission-list-item__group {
+  max-width: 170px;
+  overflow: hidden;
+  padding: 4px 9px;
+  border-radius: var(--r-tag);
+  background: var(--hover);
+  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: var(--muted);
+  font-size: 13px;
+  text-align: center;
+}
+
+.permission-spinner {
+  color: var(--accent);
+}
+
+.permission-dialog__actions {
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 18px;
+  border-top: 1px solid var(--border);
+}
+
+/*
+  THE PRINTED PASS - the one thing here that is NOT themed.
+
+  It previews a physical card that comes out of a badge printer, so it stays
+  white with dark ink on both themes; theming it would show the operator a
+  preview of something the printer cannot produce. Everything around it sits on
+  the dialog scrim, which is dark on both themes - which is why the title above
+  it is white.
+*/
 .preview-shell {
   position: relative;
   overflow: visible;
@@ -514,13 +1253,15 @@ function showMessage(text: string, color: string) {
   top: 38px;
   right: 18px;
   z-index: 2;
+  color: #ffffff;
 }
 
 .preview-title {
   margin: 0 0 12px;
   color: #ffffff;
+  font-family: var(--font-sans);
   font-size: 18px;
-  font-weight: 700;
+  font-weight: 800;
 }
 
 .pass-preview {
@@ -592,27 +1333,58 @@ 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;
   }
-}
 
-@media (max-width: 700px) {
-  .config-body {
-    padding: 22px 16px;
+  .permission-actions {
+    grid-template-columns: 1fr;
   }
+}
 
-  .section-head,
+@media (max-width: 700px) {
+  .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>