@7365admin1/layer-common 4.90.2-staging.491 → 4.90.3

package/components/HidUserEnrollment.vue

@@ -25,11 +25,7 @@
          the old table card, so it stays above the shared one. -->
     <v-alert
       v-if="selectedReader"
-      :type="
-        selectedReader.portalId && selectedReader.portalName
-          ? 'info'
-          : 'warning'
-      "
+      :type="selectedReader.portalId && selectedReader.portalName ? 'info' : 'warning'"
       variant="tonal"
       density="compact"
       class="mb-4"
@@ -54,9 +50,7 @@
       @update:page="goToPage"
     >
       <template v-if="!props.cardManagement" #actions>
-        <AppButton icon="mdi-account-plus" @click="openEnroll"
-          >Enroll</AppButton
-        >
+        <AppButton icon="mdi-account-plus" @click="openEnroll">Enroll</AppButton>
       </template>
 
       <!-- The design puts filters on their own full-width row under the
@@ -73,8 +67,8 @@
           <AppField
             v-model="search"
             search
-            placeholder="Search name, UID or registration no."
-            @keyup.enter="onSearchSubmit"
+            placeholder="Search"
+            @keyup.enter="reloadUsersFromFirstPage"
           />
           <AppSelect
             v-if="!props.cardManagement"
@@ -99,15 +93,7 @@
       </template>
 
       <template #[`item.hidUserId`]="{ item }">
-        <span class="app-cell--num">{{
-          formatHidUid(item.hidUserId) || "N/A"
-        }}</span>
-      </template>
-
-      <!-- The reader allocates this alongside the UID. A row the reader holds
-           that we never enrolled has none, so it is not always present. -->
-      <template #[`item.registration`]="{ item }">
-        <span class="app-cell--num">{{ item.registration || "N/A" }}</span>
+        <span class="app-cell--num">{{ formatHidUid(item.hidUserId) || "N/A" }}</span>
       </template>
 
       <!-- The shared chip. `utils/status.ts` now carries Mapped/Unmapped with
@@ -127,10 +113,7 @@
             {{ formatPhysicalCard(card) }}
           </span>
         </div>
-        <span
-          v-else-if="getUserCardLoadError(item)"
-          class="hid-card-load-error"
-        >
+        <span v-else-if="getUserCardLoadError(item)" class="hid-card-load-error">
           Unable to load
           <v-tooltip activator="parent" location="top">
             {{ getUserCardLoadError(item) }}
@@ -150,20 +133,13 @@
         </AppButton>
         <v-menu v-else>
           <template #activator="{ props: menuProps }">
-            <AppButton
-              v-bind="menuProps"
-              variant="row"
-              icon="mdi-dots-vertical"
-            />
+            <AppButton v-bind="menuProps" variant="row" icon="mdi-dots-vertical" />
           </template>
 
           <v-list density="compact" min-width="150">
             <v-list-item title="View" @click="openView(item)" />
             <v-list-item title="Edit" @click="openEdit(item)" />
-            <v-list-item
-              title="Manage HID Cards"
-              @click="openCardManager(item)"
-            />
+            <v-list-item title="Manage HID Cards" @click="openCardManager(item)" />
             <v-list-item
               title="Delete"
               class="text-error"
@@ -179,31 +155,23 @@
       <template #no-data>
         <div class="table-card__empty">
           <v-icon
-            :icon="
-              props.cardManagement
-                ? 'mdi-card-account-details-outline'
-                : 'mdi-account-off-outline'
-            "
+            :icon="props.cardManagement ? 'mdi-card-account-details-outline' : 'mdi-account-off-outline'"
             size="32"
           />
           <span>
-            {{
-              props.cardManagement
-                ? "No HID users available for card assignment."
-                : "No HID users enrolled yet."
-            }}
+            {{ props.cardManagement ? "No HID users available for card assignment." : "No HID users enrolled yet." }}
           </span>
         </div>
       </template>
     </TableMain>
 
     <v-dialog v-model="formDialog" max-width="420" persistent>
-      <v-card class="screen-modal">
-        <v-card-title>
+      <v-card rounded="lg">
+        <v-card-title class="small-title">
           {{ selectedUser ? "Edit User Information" : "Enroll" }}
         </v-card-title>
 
-        <v-card-text class="screen-modal__body">
+        <v-card-text>
           <div class="photo-wrap">
             <v-menu>
               <template #activator="{ props: menuProps }">
@@ -245,15 +213,6 @@
                 />
               </v-list>
             </v-menu>
-            <!-- Sits under the button because it describes what the button
-                 is reporting: the reader holds a face, and this is its
-                 reference. Nothing to show while enrolling - the value does not
-                 exist until the reader has accepted a photo. -->
-            <p v-if="editFacialData" class="photo-facial">
-              <span class="photo-facial__label">Facial Data</span>
-              <span class="photo-facial__value">{{ editFacialData }}</span>
-            </p>
-
             <input
               ref="photoInput"
               type="file"
@@ -263,252 +222,45 @@
             />
           </div>
 
-          <!-- WHO IS BEING ENROLLED.
-               The write path has always carried three subject categories -
-               `subjectLink` below maps them onto `person`, `member` or
-               `serviceProvider` - but the form only ever offered residents.
-               Staff hold no unit, so choosing Member replaces the whole
-               block/level/unit cascade with a single picker.
-               Enrolment only: an identity's subject cannot change category
-               after the fact, so an edit STATES the type rather than offering
-               it. -->
-          <div class="field-label">Enrolling <span>*</span></div>
+          <div class="field-label">Name <span>*</span></div>
+          <AppField
+            v-model="form.name"
+            aria-label="Name"
+            placeholder="Enter name"
+            klass="mb-3"
+          />
+
+          <div class="field-label">Link To <span>*</span></div>
           <AppSelect
-            v-if="!selectedUser"
             v-model="form.subjectCategory"
             :items="subjectCategoryOptions"
+            placeholder="Select person type"
             klass="mb-3"
             @update:model-value="onSubjectCategoryChanged"
           />
-          <p v-else class="field-hint mb-3">{{ subjectCategoryLabel }}</p>
-
-          <!-- Block / Level / Unit / Resident. Enrolment only.
-               Enrollment is resident-only and the resident must already exist
-               in iService365 - you pick a person, you do not type one. Name is
-               therefore a mirror of that record, never an input, so the reader
-               can never end up holding a name the app does not know.
-               Every option is derived from the residents themselves, so a
-               block, level or unit only appears when somebody lives there.
-               The list loads on first touch of Block, not on dialog open.
-               Enrolment only, with no exception. Editing does not move
-               anybody: the record already carries its block, level and unit,
-               `openEdit` loads them into the form and `saveUser` writes them
-               back untouched, so the location survives an edit without being
-               asked for. A row that never had one keeps not having one; that
-               is not a reason to make somebody fill in a location before they
-               can change a PIN. -->
-          <template v-if="!selectedUser && isResidentSubject">
-            <div class="field-label">Block <span>*</span></div>
-            <!-- The listener sits on a wrapper, NOT on AppSelect: AppSelect
-                 spreads `$attrs` over its v-menu activator AFTER the activator's
-                 own bindings, so an `@click` here would replace the handler that
-                 opens the dropdown. `focusin` covers keyboard users, and both
-                 are idempotent - `ensureOccupancy()` fetches once.
-                 AppSelect has no `loading` prop either; the placeholder carries
-                 the loading and empty states instead. -->
-            <div @click="onBlockOpened" @focusin="onBlockOpened">
-              <AppSelect
-                v-model="form.block"
-                :items="blockOptions"
-                :placeholder="blockPlaceholder"
-                klass="mb-3"
-                @update:model-value="onBlockChanged"
-              />
-            </div>
-
-            <div class="field-label">Level <span>*</span></div>
-            <AppSelect
-              v-model="form.level"
-              :items="levelOptions"
-              :disabled="!form.block"
-              placeholder="Select level"
-              klass="mb-3"
-              @update:model-value="onLevelChanged"
-            />
-
-            <div class="field-label">Unit <span>*</span></div>
-            <AppSelect
-              v-model="form.unit"
-              :items="unitOptions"
-              :disabled="!form.level"
-              placeholder="Select unit"
-              klass="mb-3"
-              @update:model-value="onUnitChanged"
-            />
-          </template>
-
-          <!-- Drawn only where it can offer something: while enrolling, or
-               while editing a record whose stored unit gives it a list. A row
-               with no unit has no candidates to show, and the dialog is then
-               purely the reader's own credentials - photo, PIN, password -
-               which is exactly the edit that must not be blocked. -->
-          <template v-if="isResidentSubject && (!selectedUser || form.unit)">
-            <div class="field-label">Resident <span>*</span></div>
-            <AppSelect
-              v-model="form.subjectId"
-              :items="subjectOptions"
-              :disabled="!form.unit"
-              :placeholder="unitResidentPlaceholder"
-              klass="mb-3"
-              @update:model-value="onResidentChanged"
-            />
-          </template>
-
-          <!-- STAFF. One picker, because a member has no unit to narrow by.
-               The candidates are the permission subjects the Access Permissions
-               screen already reads - active members of this site or its
-               organisation, each carrying its role as a subtitle. Filtering is
-               AppSelect's own, over the loaded page, so typing costs no request.
-               A member with no app account is not in the list at all: reader
-               access is bound by user id, so there is nothing to bind. The note
-               below says how many were left out rather than letting a missing
-               colleague read as a bug. -->
-          <template v-if="!selectedUser && isMemberSubject">
-            <div class="field-label">Member <span>*</span></div>
-            <AppSelect
-              v-model="form.subjectId"
-              :items="memberOptions"
-              searchable
-              search-placeholder="Search staff by name or role"
-              :placeholder="memberPlaceholder"
-              :has-more="hasMoreMembers"
-              :loading-more="loadingMoreMembers"
-              klass="mb-3"
-              @update:model-value="onMemberChanged"
-              @load-more="loadMoreMembers"
-            />
-            <!-- Ten at a time, because that page size shares the Members
-                 menu's cache entry. The rest arrive as the list is scrolled, so
-                 this only has to SAY where the list has got to - and warn that
-                 the search box filters what is loaded, not the whole estate. -->
-            <p v-if="memberRangeNote" class="field-hint mb-3">
-              {{ memberRangeNote }}
-            </p>
-            <p v-if="hiddenMemberNote" class="field-hint mb-3">
-              {{ hiddenMemberNote }}
-            </p>
-          </template>
 
-          <!-- SERVICE PROVIDER STAFF. One person from a provider company, and
-               never the company: granting a company puts every employee of the
-               firm on the door, including the ones who do not attend this site.
-               The list, the service filter and the filter's "All services"
-               default are the Members > Service Providers screen's own, from the
-               same endpoint and through the same `filterProviderMembers` rule,
-               so the two screens cannot disagree about who works here.
-               Unpaged - the endpoint returns the site's people in one response -
-               so searching and filtering cost no request. -->
-          <template v-if="!selectedUser && isProviderSubject">
-            <div class="field-label">Service</div>
-            <AppSelect
-              v-model="providerService"
-              :items="providerServiceOptions"
-              klass="mb-3"
-              @update:model-value="onProviderServiceChanged"
-            />
-
-            <div class="field-label">Person <span>*</span></div>
-            <AppSelect
-              v-model="form.subjectId"
-              :items="providerOptions"
-              searchable
-              search-placeholder="Search by name, company or role"
-              :placeholder="providerPlaceholder"
-              klass="mb-3"
-              @update:model-value="onProviderChanged"
-            />
-
-            <!-- ACCESS ONLY, and the button says so. Shown here and nowhere
-                 else: it is the one subject type that arrives a shift at a time,
-                 and the people it adds fill in their own credentials from their
-                 app afterwards. -->
-            <div class="hid-bulk-cta mb-3">
-              <AppButton
-                variant="ghost"
-                icon="mdi-account-multiple-plus-outline"
-                :disabled="loadingProviders"
-                @click="openBulkAdd"
-              >
-                Add Users in Bulk
-              </AppButton>
-              <span class="field-hint">
-                Gives access to many people at once. They add their own face, QR
-                or PIN from their app.
-              </span>
-            </div>
-
-            <p v-if="hiddenProviderNote" class="field-hint mb-3">
-              {{ hiddenProviderNote }}
-            </p>
-          </template>
-
-          <!-- The duplicate check. It is reader-scoped: this resident holding a
-               HID user on another gate is normal and says nothing here. -->
-          <p v-if="checkingResident" class="field-hint">
-            Checking enrollment...
-          </p>
-          <p
-            v-else-if="residentConflict"
-            class="field-hint field-hint--error mb-3"
-          >
-            {{ residentConflictMessage }}
-          </p>
-          <p
-            v-else-if="isResidentSubject && unitResidentNote"
-            class="field-hint mb-3"
-          >
-            {{ unitResidentNote }}
-          </p>
-
-          <!-- Read-only: it restates the chosen resident, it does not collect
-               anything. `selectedUser` is the edit case, where the name is
-               whatever the reader already holds. -->
-          <!-- A mirror of the chosen member's role, on the same rule as Name:
-               restated from the record, never collected. -->
-          <template v-if="!selectedUser && isPersonSubject">
-            <div class="field-label">{{ subjectMirrorLabel }}</div>
-            <AppField
-              v-model="form.subjectRole"
-              :aria-label="subjectMirrorLabel"
-              :placeholder="subjectMirrorPlaceholder"
-              readonly
-              klass="mb-3"
-            />
-          </template>
-
-          <div class="field-label">Name</div>
-          <AppField
-            v-model="form.name"
-            aria-label="Name"
-            :placeholder="
-              isResidentSubject
-                ? 'Select a resident above'
-                : isProviderSubject
-                ? 'Select a person above'
-                : 'Select a member above'
-            "
-            readonly
+          <div class="field-label">Resident / Staff / Provider <span>*</span></div>
+          <AppSelect
+            v-model="form.subjectId"
+            :items="subjectOptions"
+            :loading="loadingSubjects"
+            placeholder="Select an existing site record"
             klass="mb-3"
           />
 
           <div class="field-label">ID</div>
-          <AppField
-            v-model="form.hidUserId"
-            aria-label="ID"
-            readonly
-            klass="mb-3"
-          />
+          <AppField v-model="form.hidUserId" aria-label="ID" readonly klass="mb-3" />
 
           <div class="field-label">Registration No. <span>*</span></div>
           <AppField
             v-model="form.registration"
             aria-label="Registration No."
             placeholder="Enter registration no."
-            readonly
+            :readonly="!selectedUser"
             klass="mb-3"
           />
 
-          <div class="field-label">PIN (optional)</div>
+          <div class="field-label">Access PIN (optional)</div>
           <!--
             The handoff draws no password field anywhere (the sign-in screens
             are the owner's own), so the reveal toggle is this product's, not
@@ -518,8 +270,8 @@
           -->
           <AppField
             v-model="form.accessPin"
-            aria-label="PIN"
-            placeholder="Enter pin"
+            aria-label="Access PIN"
+            placeholder="Enter numeric access PIN"
             inputmode="numeric"
             autocomplete="new-password"
             :type="showPin ? 'text' : 'password'"
@@ -528,7 +280,7 @@
               <button
                 type="button"
                 class="app-field__trailing"
-                :aria-label="showPin ? 'Hide PIN' : 'Show PIN'"
+                :aria-label="showPin ? 'Hide access PIN' : 'Show access PIN'"
                 @click="showPin = !showPin"
               >
                 <v-icon :icon="showPin ? 'mdi-eye-off' : 'mdi-eye'" size="18" />
@@ -538,82 +290,33 @@
           <!-- `persistent-hint` was Vuetify's; the design's settings module
                draws an explanatory line as 12-13px/600 in `--muted`. -->
           <p class="field-hint">
-            {{
-              selectedUser && pinEnrolled
-                ? "Leave blank to keep the current PIN."
-                : "PIN works as an alternative to face or QR."
-            }}
+            {{ selectedUser && pinEnrolled ? "Leave blank to keep the current PIN." : "PIN works as an alternative to face or QR." }}
           </p>
           <v-checkbox
             v-if="selectedUser && pinEnrolled"
             v-model="removePinRequested"
-            label="Remove current PIN"
-            density="compact"
-            hide-details
-          />
-
-          <!-- Password: the reader stores only a hash plus its salt, so there
-               is nothing to read back and the field is always empty on open.
-               Same reveal toggle as the PIN above. -->
-          <div class="field-label mt-3">Password (optional)</div>
-          <AppField
-            v-model="form.password"
-            aria-label="Password"
-            :placeholder="
-              selectedUser && passwordSet
-                ? 'Enter a new password'
-                : 'Enter password'
-            "
-            autocomplete="new-password"
-            :type="showPassword ? 'text' : 'password'"
-          >
-            <template #trailing>
-              <button
-                type="button"
-                class="app-field__trailing"
-                :aria-label="showPassword ? 'Hide password' : 'Show password'"
-                @click="showPassword = !showPassword"
-              >
-                <v-icon
-                  :icon="showPassword ? 'mdi-eye-off' : 'mdi-eye'"
-                  size="18"
-                />
-              </button>
-            </template>
-          </AppField>
-          <p class="field-hint">
-            {{
-              selectedUser && passwordSet
-                ? "A password is set. Leave blank to keep it."
-                : "Used with the user ID on the reader keypad."
-            }}
-          </p>
-          <v-checkbox
-            v-if="selectedUser && passwordSet"
-            v-model="removePasswordRequested"
-            label="Remove current password"
+            label="Remove current access PIN"
             density="compact"
             hide-details
           />
         </v-card-text>
 
-        <!-- The shared modal footer: `screen-btn-ghost` + `screen-btn-primary`
-             on `v-btn`, the same pair every other module's dialog uses
-             (`assets/css/screens.css`). `v-btn` stays because the submit needs
-             `:loading`, which `AppButton` does not carry. -->
-        <v-card-actions class="screen-modal__footer">
+        <!-- The split footer bar, as panel 2 keeps it: `v-btn` because it needs
+             `:loading` and a full-bleed shape the handoff does not draw. Only
+             the colours change - they were fixed hexes on both themes. -->
+        <v-card-actions class="pa-0">
           <v-btn
-            class="text-none screen-btn-ghost"
+            class="text-none action-cancel"
             variant="flat"
+            height="44"
             @click="formDialog = false"
+            >Cancel</v-btn
           >
-            Cancel
-          </v-btn>
           <v-btn
-            class="text-none screen-btn-primary"
+            class="text-none action-submit"
             variant="flat"
+            height="44"
             :loading="saving"
-            :disabled="Boolean(residentConflict) || checkingResident"
             @click="saveUser"
           >
             Save
@@ -622,121 +325,12 @@
       </v-card>
     </v-dialog>
 
-    <!-- ADD USERS IN BULK.
-         Over the enrolment form, not instead of it: the operator came here to
-         enrol, and this is the shortcut for the case where a whole shift arrives
-         at once. It grants ACCESS only - the people it adds are recognised by the
-         reader once they add a face, QR or PIN from their own app - which is why
-         it collects no photo, PIN or password.
-         The table is the same list as the picker behind it, under the same
-         service filter, with Company / Name / Service and nothing else: the
-         Members screen's other columns say nothing about whether to open a door
-         for somebody. -->
-    <v-dialog v-model="bulkDialog" max-width="640" persistent>
-      <v-card class="screen-modal">
-        <v-card-title>Add Users in Bulk</v-card-title>
-        <v-card-text class="screen-modal__body">
-          <p class="field-hint mb-3">
-            Gives these people access to
-            <strong>{{ bulkReaderLabel }}</strong>. They add their own face, QR
-            or PIN from their app - nothing is enrolled on the reader here.
-          </p>
-
-          <AppField
-            v-model="bulkSearch"
-            aria-label="Search people"
-            placeholder="Search by name, company or role"
-            klass="mb-3"
-          />
-
-          <v-progress-linear v-if="bulkLoading" indeterminate class="mb-3" />
-
-          <template v-else-if="bulkRows.length">
-            <v-table density="compact" class="hid-bulk-table mb-2">
-              <thead>
-                <tr>
-                  <th class="hid-bulk-table__check">
-                    <!-- Acts on the rows in front of you - what the service
-                         filter and the search have left - never on the whole
-                         estate. -->
-                    <v-checkbox
-                      :model-value="bulkAllSelected"
-                      :disabled="!bulkSelectableRows.length"
-                      hide-details
-                      density="compact"
-                      aria-label="Select everyone listed"
-                      @update:model-value="toggleBulkAll"
-                    />
-                  </th>
-                  <th>Company</th>
-                  <th>Name</th>
-                  <th>Service</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="row in bulkRows" :key="row.subjectId">
-                  <td class="hid-bulk-table__check">
-                    <!-- Already on the door: ticked and locked. Unticking here
-                         would revoke access, and this dialog does not revoke. -->
-                    <v-checkbox
-                      :model-value="row.granted || isBulkSelected(row.subjectId)"
-                      :disabled="row.granted"
-                      hide-details
-                      density="compact"
-                      :aria-label="`Select ${row.name}`"
-                      @update:model-value="toggleBulkRow(row.subjectId, $event)"
-                    />
-                  </td>
-                  <td>{{ row.company || "—" }}</td>
-                  <td>
-                    {{ row.name }}
-                    <span v-if="row.granted" class="hid-bulk-granted">
-                      Already has access
-                    </span>
-                  </td>
-                  <td>{{ row.service || "—" }}</td>
-                </tr>
-              </tbody>
-            </v-table>
-            <p class="field-hint">
-              {{ bulkSelectedCount }} selected<template v-if="bulkGrantedCount">
-                · {{ bulkGrantedCount }} already have access</template
-              >
-            </p>
-          </template>
-
-          <v-alert v-else type="info" variant="tonal" density="compact">
-            {{ bulkEmptyText }}
-          </v-alert>
-        </v-card-text>
-        <v-card-actions class="screen-modal__footer">
-          <v-btn
-            class="text-none screen-btn-ghost"
-            variant="flat"
-            :disabled="bulkSaving"
-            @click="bulkDialog = false"
-          >
-            Cancel
-          </v-btn>
-          <v-btn
-            class="text-none screen-btn-primary"
-            variant="flat"
-            :loading="bulkSaving"
-            :disabled="!bulkSelectedCount"
-            @click="saveBulkAdd"
-          >
-            Give access
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-
     <HidCameraCaptureDialog v-model="cameraDialog" @capture="onCameraCapture" />
 
     <v-dialog v-model="viewDialog" max-width="430">
-      <v-card class="screen-modal">
-        <v-card-title>User Information</v-card-title>
-        <v-card-text class="screen-modal__body">
+      <v-card rounded="lg">
+        <v-card-title class="small-title">User Information</v-card-title>
+        <v-card-text>
           <div class="detail-grid">
             <span>Name</span><strong>{{ getName(selectedUser) }}</strong>
             <span>User ID</span
@@ -753,28 +347,21 @@
             ><strong>{{
               selectedUser ? getMappingStatus(selectedUser) : "N/A"
             }}</strong>
-            <span>PIN</span
-            ><strong>{{
-              selectedUser?.metadata?.pinEnrolled ? "Configured" : "N/A"
-            }}</strong>
-            <span>Password</span
-            ><strong>{{
-              selectedUser?.metadata?.passwordSet ? "Configured" : "N/A"
-            }}</strong>
+            <span>Access PIN</span
+            ><strong>{{ selectedUser?.metadata?.pinEnrolled ? "Configured" : "N/A" }}</strong>
           </div>
         </v-card-text>
-        <v-card-actions class="screen-modal__footer">
-          <AppButton variant="ghost" @click="viewDialog = false"
-            >Close</AppButton
-          >
+        <v-card-actions>
+          <v-spacer />
+          <AppButton variant="ghost" @click="viewDialog = false">Close</AppButton>
         </v-card-actions>
       </v-card>
     </v-dialog>
 
     <v-dialog v-model="cardDialog" max-width="560" persistent>
-      <v-card class="screen-modal">
-        <v-card-title>Physical HID Cards</v-card-title>
-        <v-card-text class="screen-modal__body">
+      <v-card rounded="lg">
+        <v-card-title class="small-title">Physical HID Cards</v-card-title>
+        <v-card-text>
           <p class="hid-card-user">
             {{ getName(cardUser) }}
             <span>{{ cardUser ? formatHidUid(cardUser.hidUserId) : "" }}</span>
@@ -782,11 +369,7 @@
 
           <v-progress-linear v-if="loadingCards" indeterminate class="mb-3" />
           <div v-else-if="physicalCards.length" class="hid-card-list mb-4">
-            <div
-              v-for="card in physicalCards"
-              :key="card.id"
-              class="hid-card-row"
-            >
+            <div v-for="card in physicalCards" :key="card.id" class="hid-card-row">
               <v-icon icon="mdi-card-account-details-outline" size="22" />
               <div class="hid-card-row__content">
                 <strong>{{ formatPhysicalCard(card) }}</strong>
@@ -800,13 +383,7 @@
               />
             </div>
           </div>
-          <v-alert
-            v-else
-            type="info"
-            variant="tonal"
-            density="compact"
-            class="mb-4"
-          >
+          <v-alert v-else type="info" variant="tonal" density="compact" class="mb-4">
             No physical HID card is assigned to this user.
           </v-alert>
 
@@ -820,8 +397,7 @@
             {{ cardProfileLabel }}
           </v-alert>
           <p class="field-hint hid-card-type-hint">
-            PACS uses Facility Code + Card Number. CSN uses the raw serial
-            number read from the physical card.
+            PACS uses Facility Code + Card Number. CSN uses the raw serial number read from the physical card.
           </p>
           <template v-if="hybridCardProfile">
             <div class="field-label mt-3">Presented Card Type</div>
@@ -832,13 +408,11 @@
               class="mb-3"
             />
             <p class="field-hint hid-card-type-hint">
-              Choose MIFARE CSN for a MIFARE card. Choose PACS for any other
-              card in this reader mode.
+              Choose MIFARE CSN for a MIFARE card. Choose PACS for any other card in this reader mode.
             </p>
           </template>
           <p class="field-hint hid-card-access-hint">
-            The card uses this HID user's existing portal and access rules;
-            assigning a card does not grant new access.
+            The card uses this HID user's existing portal and access rules; assigning a card does not grant new access.
           </p>
 
           <div v-if="cardForm.cardType === 'pacs'" class="hid-card-fields">
@@ -875,15 +449,9 @@
             density="compact"
             class="mt-4"
           >
-            Present the physical card to the selected Amico reader. The request
-            will time out after 30 seconds.
+            Present the physical card to the selected Amico reader. The request will time out after 30 seconds.
           </v-alert>
 
-          <!-- Reading the card at the reader is the primary way in: it is the
-               only one that does not require knowing the facility code and card
-               number up front, which are printed on nothing the operator holds.
-               Assigning by hand stays for the cards whose values are already
-               known. -->
           <div class="hid-card-actions mt-4">
             <AppButton
               variant="secondary"
@@ -902,21 +470,15 @@
             <AppButton
               v-if="enrollingCard"
               variant="ghost"
-              :disabled="cancellingCard"
               @click="cancelPhysicalCardEnrollment"
             >
-              {{ cancellingCard ? "Cancelling…" : "Cancel Reading" }}
+              Cancel Reading
             </AppButton>
           </div>
         </v-card-text>
-        <v-card-actions class="screen-modal__footer">
-          <!-- Closing mid-read would leave the reader listening with nothing
-               to receive the card it reads. -->
-          <AppButton
-            variant="ghost"
-            :disabled="enrollingCard"
-            @click="cardDialog = false"
-          >
+        <v-card-actions>
+          <v-spacer />
+          <AppButton variant="ghost" :disabled="enrollingCard" @click="cardDialog = false">
             Close
           </AppButton>
         </v-card-actions>
@@ -924,31 +486,31 @@
     </v-dialog>
 
     <v-dialog v-model="deleteDialog" max-width="360" persistent>
-      <v-card class="screen-modal">
-        <v-card-title>Delete</v-card-title>
-        <v-card-text class="screen-modal__body text-body-2">
+      <v-card rounded="lg">
+        <v-card-title class="small-title">Delete</v-card-title>
+        <v-card-text class="text-body-2">
           Are you sure you want to permanently delete this HID user?
           <div class="text-caption text-medium-emphasis mt-2">
             This action will remove the user from the HID reader and mark the
             identity as deleted.
           </div>
         </v-card-text>
-        <v-card-actions class="screen-modal__footer">
+        <v-card-actions class="pa-0">
           <v-btn
-            class="text-none screen-btn-ghost"
+            class="text-none action-cancel"
             variant="flat"
+            height="44"
             @click="deleteDialog = false"
+            >Cancel</v-btn
           >
-            Cancel
-          </v-btn>
           <v-btn
-            class="text-none screen-btn-primary"
+            class="text-none action-submit"
             variant="flat"
+            height="44"
             :loading="deleting"
             @click="deleteUser"
+            >Delete</v-btn
           >
-            Delete
-          </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -960,55 +522,11 @@
 </template>
 
 <script setup lang="ts">
-// Shared with the Access Permissions screen: `paginate` never echoes the page it
-// was asked for, and `items` sits at the root on some of these endpoints and
-// under `data` on others. This reads both, so the mistake is made once.
-import {
-  HID_ENROLMENT_SUBJECTS,
-  hiddenSubjectNote,
-  memberCandidateOf,
-  memberHasAccount,
-  HID_ALL_SERVICES,
-  permissionCategoryOf,
-  providerAccountsKnown,
-  providerCandidateOf,
-  providerEnrollableRows,
-  readMemberPage,
-  serviceFilterOf,
-  subjectCategoryLabel as labelForSubjectCategory,
-  subjectLinkOf,
-  type HidEnrolmentSubject,
-} from "../utils/hid-enrolment-subject";
-/* The SAME filter the Members > Service Providers screen applies, not a second
-   copy of the rule: a picker that disagrees with the screen the operator was
-   just looking at is a picker they cannot trust. Core applies it to the Excel
-   export too (`filterSiteProviderMembers`). */
-import {
-  filterProviderMembers,
-  serviceTypeOptions,
-} from "../utils/site-provider-members";
-/* Bulk access is granted through the permissions document, and the PUT REPLACES
-   this reader's whole assignment set. These three are what keep a bulk add from
-   revoking everybody who was already on the door - see the file's own header. */
-import {
-  seedAssignments,
-  setAssignment,
-  toAssignmentPayload,
-  type HidAssignmentState,
-} from "../utils/hid-permission-assignments";
-
 const props = defineProps({
   site: {
     type: String,
     required: true,
   },
-  // Which organisation the access this enrolment grants belongs to. Saving now
-  // assigns the person to the reader, and the assignment is stored per
-  // organisation - see `schemaCreateHidAmicoIdentity`.
-  org: {
-    type: String,
-    default: "",
-  },
   cardManagement: {
     type: Boolean,
     default: false,
@@ -1029,21 +547,12 @@ const {
   getUserPinStatus,
   setUserPin,
   deleteUserPin,
-  getUserPasswordStatus,
-  setUserPassword,
-  deleteUserPassword,
   runObjectOperation,
   createIdentity,
   updateIdentity,
   deleteIdentity,
-  getSitePermissions,
-  updateSitePermissions,
+  getPermissionCandidates,
 } = useHidAmico();
-const { getAll: getAllMembers } = useMember();
-/* Members > Service Providers reads this same call, so the enrolment picker
-   offers exactly the people that screen lists. Site-scoped by the server. */
-const { getSiteMembers } = useServiceProvider();
-const runtimeConfig = useRuntimeConfig();
 
 type HidMetadata = Record<string, unknown> & {
   name?: string;
@@ -1057,7 +566,6 @@ type HidMetadata = Record<string, unknown> & {
   lastAccessAt?: string;
   facialScores?: Record<string, unknown>;
   pinEnrolled?: boolean;
-  passwordSet?: boolean;
   hidPhysicalCards?: HidCard[];
 };
 
@@ -1108,7 +616,6 @@ type HidIdentityPayload = Record<string, unknown> & {
 const readers = ref<HidReader[]>([]);
 const users = ref<HidUser[]>([]);
 const administratorUserIds = ref<Set<number>>(new Set());
-const { selectHidReader, resolveForSite } = useHidReaderSelection();
 const selectedReaderId = ref("");
 const search = ref("");
 const status = ref("");
@@ -1124,913 +631,71 @@ const formDialog = ref(false);
 const viewDialog = ref(false);
 const deleteDialog = ref(false);
 const cardDialog = ref(false);
-const selectedUser = ref<HidUser | null>(null);
-const cardUser = ref<HidUser | null>(null);
-const physicalCards = ref<HidCard[]>([]);
-const physicalCardsByUserId = ref<Record<string, HidCard[]>>({});
-const physicalCardErrorsByUserId = ref<Record<string, string>>({});
-const loadingCards = ref(false);
-const savingCard = ref(false);
-const enrollingCard = ref(false);
-/*
- * Cancelling makes the in-flight enrol REJECT, and that rejection is expected
- * rather than a failure. Without this flag the cancel raises an error toast on
- * top of the one confirming it, which reads as the cancel having gone wrong.
- */
-const cardEnrollmentCancelled = ref(false);
-/** The cancel's own round trip to the reader — a second or two, not the enrol's. */
-const cancellingCard = ref(false);
-const deletingCardId = ref("");
-const showPin = ref(false);
-const pinEnrolled = ref(false);
-const photoInput = ref<HTMLInputElement | null>(null);
-const cameraDialog = ref(false);
-const selectedPhotoFile = ref<File | null>(null);
-const removePhotoRequested = ref(false);
-/**
- * Client requirement (2026-08-26): the photo is neither shown nor kept once registration
- * completes, so the form tracks only WHETHER this person is enrolled. Re-enrolling needs a
- * fresh capture -- there is no stored image to re-send.
- */
-const facialEnrolled = ref(false);
-
-function hasFacialEnrollment(user?: HidUser | null) {
-  return Boolean(
-    user?.metadata?.facialEnrolled ||
-      user?.metadata?.facialData ||
-      user?.metadata?.imageTimestamp
-  );
-}
-
-/**
- * The reader's own reference for the enrolled face, shown while editing.
- *
- * We hold neither the image nor the biometric template - the reader does - so
- * this value is the only handle on the enrollment there is. `getFacialData` is
- * the roster's Facial Data column, reused here so the dialog and the table
- * cannot disagree; it answers "N/A" when there is nothing, which is the case
- * this must not draw a row for.
- */
-const editFacialData = computed(() => {
-  if (!selectedUser.value) return "";
-  const value = String(getFacialData(selectedUser.value) ?? "").trim();
-  return value && value !== "N/A" ? value : "";
-});
-const removePinRequested = ref(false);
-const passwordSet = ref(false);
-const showPassword = ref(false);
-const removePasswordRequested = ref(false);
-const snackbar = reactive({
-  show: false,
-  color: "success",
-  message: "",
-});
-
-type OccupiedUnit = { _id: string; name: string; people: number };
-type OccupiedLevel = { _id: string; name: string; units?: OccupiedUnit[] };
-type OccupiedBlock = {
-  _id: string;
-  name: string;
-  block: number | null;
-  levels?: OccupiedLevel[];
-};
-type UnitPerson = {
-  _id: string;
-  name?: string;
-  unitName?: string;
-  /**
-   * The resident's app account, and the reason this field is read here.
-   *
-   * A HID identity is refused unless its subject is a valid permission subject
-   * at the site, and for a resident that means a `site.people` row WITH a
-   * linked user - `assertPermissionSubject` in `iservice365-core` filters on
-   * exactly this field. The permission model has no way to represent anyone
-   * else: `resolvePermissionUserBindings` binds reader access by user id and
-   * drops every row without one, so a resident enrolled without an account
-   * would end up on the reader holding no access rules at all.
-   *
-   * The picker this replaced was fed by that same server-side function, so it
-   * could never offer an unenrollable resident. The unit cascade asks People
-   * Management instead, which has no such filter - hence this one.
-   */
-  user?: string | null;
-};
-
-/**
- * THE SUBJECT TYPE THIS SCREEN WAS LAST USED FOR.
- *
- * Module scope, not component scope, and deliberately: the dialog is rebuilt on
- * every open and the component itself is unmounted when the operator moves
- * between HID screens, so a local ref would forget the choice immediately.
- * Enrolling ten guards in a row should not mean picking "Member" ten times.
- *
- * Not persisted. Surviving a hard refresh is a smaller benefit than surviving
- * the dialog, and `useHidReaderSelection` already set the precedent for where
- * that line sits.
- */
-/* The dropdown's values, plus `service_provider` - which the dropdown does not
-   offer but `openEdit` resolves from records that name a COMPANY. */
-type TEnrolmentSubjectValue = HidEnrolmentSubject | "service_provider";
-
-const REMEMBERED_SUBJECT_CATEGORY = ref<HidEnrolmentSubject>("resident");
-
-const form = reactive({
-  reader: "",
-  block: "",
-  level: "",
-  unit: "",
-  name: "",
-  hidUserId: "",
-  registration: "",
-  isAdministrator: false,
-  accessPin: "",
-  password: "",
-  photoPreview: "",
-  subjectCategory: REMEMBERED_SUBJECT_CATEGORY.value as TEnrolmentSubjectValue,
-  subjectId: "",
-  /** A mirror of the chosen member's role. Never sent; display only. */
-  subjectRole: "",
-});
-
-const route = useRoute();
-const orgId = computed(() => String(route.params.org || ""));
-
-// The cascade runs on People Management's own endpoints, the same pair the
-// resident forms use:
-//   GET /api/people/site/:site/occupied-structure  - blocks/levels/units that
-//        actually have an occupant, so the picker cannot offer an empty unit
-//   GET /api/people/unit/:unit                     - who is in the chosen one
-// Both are fetched on FIRST USE, never when the dialog opens.
-const { getOccupiedStructure, getPeopleByUnit } = usePeople();
-
-// `resident,tenant` matches the occupancy endpoint's own default, so the units
-// it offers and the people this returns are the same set. Asking the two
-// halves different questions is how a unit ends up offered but empty.
-const OCCUPANT_TYPES = "resident,tenant";
-
-const occupiedBlocks = ref<OccupiedBlock[]>([]);
-const occupancyLoaded = ref(false);
-const loadingOccupancy = ref(false);
-const unitPeople = ref<UnitPerson[]>([]);
-const loadingUnitPeople = ref(false);
-
-// "Is this resident already enrolled on THIS reader?" - the reader keeps its own
-// user table, so the same person at a different gate is normal and does not
-// count. Held here rather than derived, because it is the answer to a request.
-//
-// The server refuses the duplicate as well (`createIdentity` in
-// `iservice365-core`), but by the time it answers, `saveUser` has already
-// created a user on the physical device and has to roll it back. Asking here
-// keeps that off the reader entirely.
-const residentConflict = ref<HidUser | null>(null);
-const checkingResident = ref(false);
-
-// One spelling of a block, used by the picker and by the label stamped onto the
-// record. Two copies of this expression is how the dropdown and the Unit column
-// drift apart.
-function formatBlockTitle(block?: OccupiedBlock | null) {
-  if (!block) return "";
-  return block.name
-    ? `Block ${block.block} (${block.name})`
-    : `Block ${block.block ?? ""}`.trim();
-}
-
-const blockOptions = computed(() =>
-  occupiedBlocks.value.map((block) => ({
-    title: formatBlockTitle(block),
-    value: String(block._id ?? ""),
-  }))
-);
-
-const levelOptions = computed(() => {
-  const block = occupiedBlocks.value.find(
-    (item) => String(item._id ?? "") === form.block
-  );
-  return (block?.levels ?? []).map((level) => ({
-    title: String(level.name ?? ""),
-    value: String(level._id ?? ""),
-  }));
-});
-
-const unitOptions = computed(() => {
-  const block = occupiedBlocks.value.find(
-    (item) => String(item._id ?? "") === form.block
-  );
-  const level = (block?.levels ?? []).find(
-    (item) => String(item._id ?? "") === form.level
-  );
-  return (level?.units ?? []).map((unit) => ({
-    title: String(unit.name ?? ""),
-    value: String(unit._id ?? ""),
-  }));
-});
-
-// Only the residents the server will actually accept - see `UnitPerson.user`.
-// Offering the rest produced "The linked HID identity subject is not active at
-// this site." at the very end of enrollment, after a user had already been
-// written to the reader.
-const enrollableUnitPeople = computed(() =>
-  unitPeople.value.filter((person) => Boolean(person.user))
-);
-
-const unenrollableUnitPeopleCount = computed(
-  () => unitPeople.value.length - enrollableUnitPeople.value.length
-);
-
-// `_id` here is `site.people._id`, which is exactly the `person` that
-// `createIdentity` maps a HID user to.
-const subjectOptions = computed(() =>
-  enrollableUnitPeople.value.map((person) => ({
-    title: String(person.name ?? "Resident"),
-    value: String(person._id ?? ""),
-  }))
-);
-
-// Says why somebody the operator can see in People Management is missing here.
-// Without it the unit just looks empty and the screen looks broken.
-const unitResidentNote = computed(() => {
-  if (
-    !form.unit ||
-    loadingUnitPeople.value ||
-    !unenrollableUnitPeopleCount.value
-  )
-    return "";
-  const count = unenrollableUnitPeopleCount.value;
-  const subject = count === 1 ? "1 resident" : `${count} residents`;
-  const verb = count === 1 ? "is" : "are";
-  return `${subject} in this unit ${verb} not listed: HID enrollment needs a resident app account, and ${
-    count === 1 ? "that person has" : "they have"
-  } none yet.`;
-});
-
-/* ── THE SUBJECT TYPE ──────────────────────────────────────────────────── */
-
-const subjectCategoryOptions = HID_ENROLMENT_SUBJECTS;
-
-const isResidentSubject = computed(() => form.subjectCategory === "resident");
-/* Members and provider staff both pick ONE PERSON from a flat list, but from
-   different lists, so they are separate branches rather than "not a resident". */
-const isMemberSubject = computed(
-  () => form.subjectCategory === "property_management"
-);
-const isProviderSubject = computed(
-  () => form.subjectCategory === "service_provider_staff"
-);
-/** Either of the two person pickers - what the Role mirror follows. */
-const isPersonSubject = computed(
-  () => isMemberSubject.value || isProviderSubject.value
-);
-
-/* The mirror's label follows the list it mirrors. A member's subtitle is their
-   role at the site; a contractor's is the firm they work for, and calling that
-   "Role" would read as a mistake. */
-const subjectMirrorLabel = computed(() =>
-  isProviderSubject.value ? "Company" : "Role"
-);
-const subjectMirrorPlaceholder = computed(() =>
-  isProviderSubject.value ? "Select a person above" : "Select a member above"
-);
-
-/* What an EDIT shows in place of the control, since the type cannot change.
-   Looked up in the util, not in the switch's own options: records carry
-   `service_provider` too, and the options list would have called those
-   "Resident". */
-const subjectCategoryLabel = computed(() =>
-  labelForSubjectCategory(form.subjectCategory)
-);
-
-/* ── STAFF CANDIDATES ─────────────────────────────────────────────────────
- *
- * Read from `GET /api/members` — the SAME endpoint, with the same filters, that
- * the Members menu reads. That is deliberate and was the fix for a real bug: the
- * first version used the HID permission-candidate endpoint, which applies NO
- * `type` filter, so it offered every active members row at the site including
- * service providers and residents. A picker that disagrees with the Members menu
- * is a picker the operator cannot trust.
- *
- * `type` is the running app, the same way `HidQrCodeConfiguration` reads it, so
- * the property app lists its own staff and the security app lists its own. The
- * members endpoint expands legacy spellings of a type itself (`appTypeQuery`).
- *
- * Service providers get their own option next; they are not silently folded in
- * here.
- */
-/*
- * TEN, to share the Members menu's cache key.
- *
- * `member.repo.ts` caches each page under a key that INCLUDES `limit`, so a
- * different limit is a different cache entry with its own 15-minute life. This
- * picker asked for 50 and got its own rarely-touched slot, which went stale and
- * showed six members where the Members menu showed nine - the same query, the
- * same instant, two answers. Asking for the menu's own page size means the two
- * read the same entry and cannot disagree.
- */
-const MEMBER_PAGE_LIMIT = 10;
-
-type MemberCandidate = { subjectId: string; name: string; subtitle: string };
-
-const memberCandidates = ref<MemberCandidate[]>([]);
-const loadingMembers = ref(false);
-const loadingMoreMembers = ref(false);
-const membersLoaded = ref(false);
-/** The last page successfully loaded; 0 before the first. */
-const memberPage = ref(0);
-/** Rows fetched so far, INCLUDING those hidden for having no account. */
-const memberRowsLoaded = ref(0);
-/** What the server says matches the query, across every page. */
-const memberTotalRows = ref(0);
-/* Active staff dropped for having no app account. Counted here rather than
- * asked of the server, because this endpoint returns the `user` field and so
- * the answer is already in hand - see `hiddenMemberNote`. */
-const hiddenMemberCount = ref(0);
-
-const hasMoreMembers = computed(
-  () => memberRowsLoaded.value < memberTotalRows.value
-);
-
-/*
- * Bumped on every request, so a response that is no longer the current one is
- * dropped. Scroll-loading makes this matter: a page still in flight when the
- * dialog reopens, or when the type is switched away and back, would otherwise
- * append onto a list that has since been replaced. Same guard, and the same
- * reason, as `cardRequestSeq` in `EntryPassInformation.vue`.
- */
-let memberRequestSeq = 0;
-
-const memberOptions = computed(() =>
-  memberCandidates.value.map((candidate) => ({
-    // Role in the title as well as the mirror below: two people can share a name,
-    // and the popover is where they have to be told apart.
-    title: candidate.subtitle
-      ? `${candidate.name} — ${candidate.subtitle}`
-      : candidate.name,
-    value: candidate.subjectId,
-  }))
-);
-
-const memberPlaceholder = computed(() => {
-  if (loadingMembers.value) return "Loading staff...";
-  if (!membersLoaded.value) return "Select a member";
-  if (memberOptions.value.length) return "Select a member";
-  return hiddenMemberCount.value
-    ? "No staff here can be enrolled yet"
-    : "No staff at this site";
-});
-
-/* The same courtesy the resident cascade pays: say why somebody the operator
- * can see in the Members menu is not in this list. */
-const hiddenMemberNote = computed(() => {
-  // Only once everything is loaded. Half a list gives half a count, and
-  // "3 members at this site" would then be a number about this PAGE wearing the
-  // word "site" - the range note below carries the partial truth instead.
-  if (loadingMembers.value || hasMoreMembers.value) return "";
-  return hiddenSubjectNote(hiddenMemberCount.value, "member");
-});
-
-/* What is loaded against what exists - and the warning that the picker's own
-   search only ever sees what has been fetched. */
-const memberRangeNote = computed(() =>
-  hasMoreMembers.value
-    ? `Showing ${memberRowsLoaded.value} of ${memberTotalRows.value}. Search looks only at these.`
-    : ""
-);
-
-/** Back to "nothing loaded", so the next open starts from page one. */
-function resetMemberCandidates() {
-  // Anything still in flight belongs to the list being thrown away.
-  memberRequestSeq += 1;
-  memberCandidates.value = [];
-  hiddenMemberCount.value = 0;
-  memberPage.value = 0;
-  memberRowsLoaded.value = 0;
-  memberTotalRows.value = 0;
-  membersLoaded.value = false;
-}
-
-/**
- * One page of this site's active staff.
- *
- * Paged rather than fetched whole: a page of ten is what the Members menu asks
- * for, and sharing that page size shares its cache entry. `append` is what
- * separates the first load from Load more - the first replaces, the rest add.
- *
- * NEVER THROWS. The list is left as it is and the placeholder says so, because
- * choosing "Member" must not break the dialog.
- */
-async function fetchMemberPage(page: number, append: boolean) {
-  const memberType = String(runtimeConfig.public.APP ?? "").trim();
-  // "App" is the nuxt config's own placeholder default. Without a real app there
-  // is no member type to ask for, and a typeless query returns nothing anyway.
-  if (!props.site || !props.org || !memberType || memberType === "App") {
-    resetMemberCandidates();
-    membersLoaded.value = true;
-    return;
-  }
-
-  const seq = (memberRequestSeq += 1);
-  const busy = append ? loadingMoreMembers : loadingMembers;
-  busy.value = true;
-  try {
-    const response = await getAllMembers({
-      org: props.org,
-      siteId: props.site,
-      type: memberType,
-      status: "active",
-      page,
-      limit: MEMBER_PAGE_LIMIT,
-    });
-    if (seq !== memberRequestSeq) return;
-    const parsed = readMemberPage(response);
-    const enrollable = parsed.items.filter(memberHasAccount);
-    const candidates = enrollable.map(memberCandidateOf);
-
-    memberCandidates.value = append
-      ? [...memberCandidates.value, ...candidates]
-      : candidates;
-    const hiddenOnPage = parsed.items.length - enrollable.length;
-    hiddenMemberCount.value = append
-      ? hiddenMemberCount.value + hiddenOnPage
-      : hiddenOnPage;
-    memberRowsLoaded.value = append
-      ? memberRowsLoaded.value + parsed.items.length
-      : parsed.items.length;
-    memberTotalRows.value = parsed.total;
-    memberPage.value = page;
-    membersLoaded.value = true;
-  } catch (error: unknown) {
-    if (seq !== memberRequestSeq) return;
-    console.error("Unable to load staff for HID enrollment:", error);
-    // An "append" that failed keeps what is already on screen; a first load has
-    // nothing to keep. Either way the dialog stays usable.
-    if (!append) resetMemberCandidates();
-    membersLoaded.value = true;
-  } finally {
-    // Always its OWN flag, superseded or not: a request that leaves its spinner
-    // set strands the list behind a wait that will never end.
-    busy.value = false;
-  }
-}
-
-/** The first page, replacing whatever was there. */
-function loadMemberCandidates() {
-  return fetchMemberPage(1, false);
-}
-
-/** The next page, added to the list. */
-function loadMoreMembers() {
-  if (loadingMembers.value || loadingMoreMembers.value || !hasMoreMembers.value)
-    return;
-  return fetchMemberPage(memberPage.value + 1, true);
-}
-
-/* ── SERVICE PROVIDER STAFF ───────────────────────────────────────────────
- *
- * ONE PERSON from a provider company, never the company.
- *
- * Read from `GET /api/service-providers/site-members` - the same call behind
- * Members > Service Providers, with the same `filterProviderMembers` rule - so
- * the picker lists exactly the people that screen lists. The server scopes it to
- * the site; these are the contractors who attend THIS site, not every employee
- * of every firm engaged with the organisation.
- *
- * Unpaged, deliberately, unlike the staff picker above: this endpoint returns
- * the site's people in one response (capped at 1000 by the repository) and has
- * no per-page cache entry to disagree with. The service filter and the search
- * box both run over the loaded list, so neither costs a request.
- */
-const providerPeople = ref<Record<string, unknown>[]>([]);
-const providerCompanyCount = ref(0);
-const loadingProviders = ref(false);
-const providersLoaded = ref(false);
-/**
- * All services is the default, the same as the Members screen - but it carries a
- * REAL value here, not "". `AppSelect`'s `hasSingleValue` is false for an empty
- * string, so an empty-valued option draws the placeholder in placeholder grey and
- * is never marked as chosen: the filter worked and the field looked blank. See
- * `serviceFilterOf`.
- */
-const providerService = ref<string>(HID_ALL_SERVICES);
-
-/** What the filter actually receives: "" for All services. */
-const providerServiceFilter = computed(() => serviceFilterOf(providerService.value));
-let providerRequestSeq = 0;
-
-/** Everyone who can actually be given a door: an app account, and active. */
-const providerEnrollable = computed(() =>
-  providerEnrollableRows(providerPeople.value)
-);
-
-/* Whether the endpoint told us who holds an app account. It only began
-   returning `user` in core 3.130, and this layer can be deployed ahead of it. */
-const providerAccountsVisible = computed(() =>
-  providerAccountsKnown(providerPeople.value)
-);
-
-/** People the operator can see on the Members screen but cannot enrol here. */
-const hiddenProviderCount = computed(
-  () => providerPeople.value.length - providerEnrollable.value.length
-);
-
-const providerServiceOptions = computed(() => [
-  { title: "All services", value: HID_ALL_SERVICES },
-  // From the ENROLLABLE set, so choosing a service never lands on an empty list.
-  ...serviceTypeOptions(providerEnrollable.value as Array<{ type?: string; typeLabel?: string }>),
-]);
-
-/** The filtered list - what both the picker and the bulk table draw. */
-const providerRows = computed(() =>
-  filterProviderMembers(providerEnrollable.value as Array<Record<string, any>>, {
-    type: providerServiceFilter.value,
-  })
-);
-
-const providerOptions = computed(() =>
-  providerRows.value.map((row) => {
-    const candidate = providerCandidateOf(row);
-    return {
-      // The firm in the title as well as the mirror: two contractors sharing a
-      // first name is the normal case, and the popover is where they have to be
-      // told apart.
-      title: candidate.subtitle
-        ? `${candidate.name} — ${candidate.subtitle}`
-        : candidate.name,
-      value: candidate.subjectId,
-    };
-  })
-);
-
-const providerPlaceholder = computed(() => {
-  if (loadingProviders.value) return "Loading people...";
-  if (!providersLoaded.value) return "Select a person";
-  if (providerOptions.value.length) return "Select a person";
-  if (providerServiceFilter.value) return "Nobody in this service can be enrolled yet";
-  if (hiddenProviderCount.value) return "Nobody here can be enrolled yet";
-  return providerCompanyCount.value
-    ? "No service provider people at this site"
-    : "No service providers work at this site yet";
-});
-
-/* Say why somebody on the Members screen is not in this list, rather than
-   letting a missing colleague read as a broken dialog. */
-const hiddenProviderNote = computed(() => {
-  if (loadingProviders.value || !hiddenProviderCount.value) return "";
-  const count = hiddenProviderCount.value;
-  const subject = count === 1 ? "1 person" : `${count} people`;
-  const verb = count === 1 ? "is" : "are";
-  const holder = count === 1 ? "that person is" : "they are";
-  const needs = providerAccountsVisible.value
-    ? "an active membership with an app account"
-    : "an active membership at this site";
-  return `${subject} from this site's service providers ${verb} not listed:`
-    + ` HID enrollment needs ${needs}, and ${holder} without one.`;
-});
-
-/** Back to "nothing loaded", so the next open starts clean. */
-function resetProviderCandidates() {
-  providerRequestSeq += 1;
-  providerPeople.value = [];
-  providerCompanyCount.value = 0;
-  providerService.value = HID_ALL_SERVICES;
-  providersLoaded.value = false;
-}
-
-/**
- * This site's service provider people.
- *
- * NEVER THROWS, on the same rule as the staff loader: choosing Service provider
- * must not break the dialog. The placeholder carries the failure.
- */
-async function loadProviderCandidates() {
-  if (!props.site) {
-    resetProviderCandidates();
-    providersLoaded.value = true;
-    return;
-  }
-  const seq = (providerRequestSeq += 1);
-  loadingProviders.value = true;
-  try {
-    const data = await getSiteMembers(props.site);
-    // A response that arrived after the dialog was reopened belongs to a list
-    // that no longer exists - the same guard the staff pager uses.
-    if (seq !== providerRequestSeq) return;
-    providerPeople.value = Array.isArray(data?.items)
-      ? (data.items as unknown as Record<string, unknown>[])
-      : [];
-    providerCompanyCount.value = Array.isArray(data?.companies)
-      ? data.companies.length
-      : 0;
-    providersLoaded.value = true;
-  } catch (error: unknown) {
-    if (seq !== providerRequestSeq) return;
-    console.error("Unable to load service provider people for HID enrollment:", error);
-    providerPeople.value = [];
-    providerCompanyCount.value = 0;
-    providersLoaded.value = true;
-  } finally {
-    loadingProviders.value = false;
-  }
-}
-
-/** The chosen person, restated into Name and the Company mirror. */
-function onProviderChanged() {
-  // Compared on the TRIMMED id, because that is what the option's value carries
-  // (`providerCandidateOf` trims) - matching the raw field would silently find
-  // nobody and blank the name the operator just picked.
-  const row = providerRows.value.find(
-    (item) => String(item._id ?? "").trim() === form.subjectId
-  );
-  const candidate = row ? providerCandidateOf(row) : null;
-  form.name = candidate?.name ?? "";
-  form.subjectRole = candidate?.subtitle ?? "";
-  void checkSubjectEnrollment();
-}
-
-/* Changing the service can take the chosen person out of the list. Leaving a
-   selection that is no longer on screen is how a save ends up naming somebody
-   the operator cannot see. */
-function onProviderServiceChanged() {
-  if (!form.subjectId) return;
-  const stillThere = providerRows.value.some(
-    (item) => String(item._id ?? "").trim() === form.subjectId
-  );
-  if (stillThere) return;
-  form.subjectId = "";
-  form.name = "";
-  form.subjectRole = "";
-  residentConflict.value = null;
-}
-
-/* ── ADD USERS IN BULK ────────────────────────────────────────────────────
- *
- * ACCESS, NOT CREDENTIALS. This grants a reader group to many people at once and
- * stops there - no face, no card, no PIN. Each person then adds their own
- * credential from their app, which attaches to the HID user this grant created
- * (`getProfileEnrollmentContext` reuses the existing profile identity), so
- * nobody has to be enrolled twice.
- *
- * It writes through `PUT /sites/:siteId/permissions`, the one call that writes
- * group membership, and the device users are created by the reconcile that call
- * triggers: `provisionPermissionUser` writes `{ name, registration }` and
- * nothing else. That is exactly "user record and group, credentials empty".
- *
- * THE TRAP, and the reason the saved set is fetched first: that PUT REPLACES
- * this reader's whole assignment set. Sending only the ticked contractors would
- * revoke every resident and every member on the door. The payload is always
- * built from the reader's existing assignments PLUS the selection.
- */
-const bulkDialog = ref(false);
-const bulkLoading = ref(false);
-const bulkSaving = ref(false);
-const bulkSearch = ref("");
-/** The reader's CURRENT assignments, across every category. The merge base. */
-const bulkSaved = ref<HidAssignmentState>(new Map());
-/** Who is being added now. Already-granted people are never in here. */
-const bulkSelected = ref<Set<string>>(new Set());
-
-/* NAME THE DOOR. A bulk grant is reader-scoped and the reader was chosen on the
-   screen behind two dialogs, so the confirmation says which one rather than
-   leaving the operator to remember. */
-const bulkReaderLabel = computed(() => {
-  const reader = selectedReader.value;
-  const name = String(reader?.name ?? "").trim() || "this HID reader";
-  const location = String(reader?.location ?? "").trim();
-  return location ? `${name} · ${location}` : name;
-});
-
-/** The same people the picker offers, narrowed by this dialog's own search. */
-const bulkRows = computed(() => {
-  const rows = filterProviderMembers(
-    providerRows.value as Array<Record<string, any>>,
-    { search: bulkSearch.value }
-  );
-  return rows.map((row) => {
-    const candidate = providerCandidateOf(row);
-    const id = candidate.subjectId;
-    return {
-      subjectId: id,
-      name: candidate.name,
-      company: String(row.company ?? "").trim(),
-      service: String(row.typeLabel ?? row.type ?? "").trim(),
-      // Already on the door. Ticked and locked rather than hidden: hiding them
-      // would make "select all" look like it had missed people, and unticking
-      // one here would revoke access this dialog is not for revoking.
-      granted: bulkSaved.value.has(id),
-    };
-  });
-});
-
-const bulkSelectableRows = computed(() =>
-  bulkRows.value.filter((row) => !row.granted)
-);
-const bulkSelectedCount = computed(() => bulkSelected.value.size);
-const bulkAllSelected = computed(
-  () =>
-    bulkSelectableRows.value.length > 0 &&
-    bulkSelectableRows.value.every((row) => bulkSelected.value.has(row.subjectId))
-);
-const bulkGrantedCount = computed(
-  () => bulkRows.value.filter((row) => row.granted).length
-);
-
-const bulkEmptyText = computed(() => {
-  if (bulkLoading.value) return "Loading...";
-  if (bulkSearch.value.trim()) return "No one matches this search.";
-  if (providerServiceFilter.value) return "No one in this service can be enrolled yet.";
-  return "No service provider people can be enrolled at this site yet.";
-});
-
-function isBulkSelected(subjectId: string) {
-  return bulkSelected.value.has(subjectId);
-}
-
-function toggleBulkRow(subjectId: string, selected: boolean) {
-  const next = new Set(bulkSelected.value);
-  if (selected) next.add(subjectId);
-  else next.delete(subjectId);
-  bulkSelected.value = next;
-}
-
-/* Select-all acts on the ROWS IN FRONT OF THE OPERATOR - what the service filter
-   and the search have left - never on the whole estate. A tick box cannot
-   quietly grant a door to people who are not on screen. */
-function toggleBulkAll(selected: boolean) {
-  const next = new Set(bulkSelected.value);
-  for (const row of bulkSelectableRows.value) {
-    if (selected) next.add(row.subjectId);
-    else next.delete(row.subjectId);
-  }
-  bulkSelected.value = next;
-}
-
-/**
- * Open the bulk dialog, after reading what the reader already holds.
- *
- * The saved set is fetched EVERY time rather than cached: it is the merge base
- * for a write that replaces the reader's assignments, and a stale one would
- * revoke whoever was granted in between.
- */
-async function openBulkAdd() {
-  const readerId =
-    selectedReaderId.value || form.reader || readers.value[0]?._id;
-  if (!readerId) {
-    showToast("Select a HID reader before adding people in bulk.", "error");
-    return;
-  }
-  /* The permissions endpoints REQUIRE an org - `schemaHidPermissionScopeQuery`
-     has it as `required()`, unlike `createIdentity`, which falls back to the
-     site's own. Both pages that mount this component pass one, so this is a
-     guard against a 400 that would read as a server fault. */
-  if (!props.org) {
-    showToast(
-      "This screen cannot grant access in bulk without an organization.",
-      "error"
-    );
-    return;
-  }
-  bulkSearch.value = "";
-  bulkSelected.value = new Set();
-  bulkSaved.value = new Map();
-  bulkDialog.value = true;
-  bulkLoading.value = true;
-  try {
-    if (!providersLoaded.value) await loadProviderCandidates();
-    const response = await getSitePermissions(props.site, props.org, readerId);
-    bulkSaved.value = seedAssignments(response?.data?.assignments ?? []);
-  } catch (error: unknown) {
-    // Closed rather than left open on an empty merge base: saving from here
-    // would send only the ticked people and revoke everybody else.
-    bulkDialog.value = false;
-    showToast(
-      apiReason(error) || "Unable to read this reader's current access.",
-      "error"
-    );
-  } finally {
-    bulkLoading.value = false;
-  }
-}
-
-/** Grant the ticked people, keeping everyone the reader already admits. */
-async function saveBulkAdd() {
-  if (bulkSaving.value || !bulkSelected.value.size) return;
-  const readerId =
-    selectedReaderId.value || form.reader || readers.value[0]?._id;
-  if (!readerId) {
-    showToast("Select a HID reader before adding people in bulk.", "error");
-    return;
-  }
-
-  bulkSaving.value = true;
-  try {
-    // Seeded from what the server holds, so every category the reader already
-    // admits survives this write.
-    let draft: HidAssignmentState = new Map(bulkSaved.value);
-    for (const subjectId of bulkSelected.value) {
-      draft = setAssignment(
-        draft,
-        bulkSaved.value,
-        subjectId,
-        // A provider employee's grant is stored under the STAFF category: core's
-        // `permissionSubjectOfIdentity` reads the `member` link and cannot see
-        // this dropdown, and that category's subject list already includes these
-        // people. See `permissionCategoryOf`.
-        permissionCategoryOf("service_provider_staff") as THidPermissionCategory,
-        true
-      );
-    }
-    const added = bulkSelected.value.size;
-    await updateSitePermissions(
-      props.site,
-      props.org,
-      readerId,
-      toAssignmentPayload(draft)
-    );
-    // Both dialogs close and the list is re-read: the reconcile has just created
-    // a HID user for each person, so the roster behind this dialog is stale.
-    bulkDialog.value = false;
-    formDialog.value = false;
-    await loadUsers();
-    showToast(
-      `${added} ${added === 1 ? "person" : "people"} can now use this reader. `
-        + "They add their own face, QR or PIN from their app.",
-      "success"
-    );
-  } catch (error: unknown) {
-    showToast(
-      apiReason(error) || "Unable to give these people access to this reader.",
-      "error"
-    );
-  } finally {
-    bulkSaving.value = false;
-  }
-}
-
+const selectedUser = ref<HidUser | null>(null);
+const cardUser = ref<HidUser | null>(null);
+const physicalCards = ref<HidCard[]>([]);
+const physicalCardsByUserId = ref<Record<string, HidCard[]>>({});
+const physicalCardErrorsByUserId = ref<Record<string, string>>({});
+const loadingCards = ref(false);
+const savingCard = ref(false);
+const enrollingCard = ref(false);
+const cardEnrollmentCancelled = ref(false);
+const deletingCardId = ref("");
+const showPin = ref(false);
+const pinEnrolled = ref(false);
+const photoInput = ref<HTMLInputElement | null>(null);
+const cameraDialog = ref(false);
+const selectedPhotoFile = ref<File | null>(null);
+const removePhotoRequested = ref(false);
 /**
- * Switching type clears the chosen subject, and nothing else.
- *
- * The id spaces do not overlap - a `site.people._id` submitted as a `member`
- * would be refused by the server, and worse, a stale one could name a real
- * member - so it is cleared rather than carried. Name and Role mirror the
- * choice, so they clear with it.
+ * Client requirement (2026-08-26): the photo is neither shown nor kept once registration
+ * completes, so the form tracks only WHETHER this person is enrolled. Re-enrolling needs a
+ * fresh capture -- there is no stored image to re-send.
  */
-async function onSubjectCategoryChanged() {
-  REMEMBERED_SUBJECT_CATEGORY.value = form.subjectCategory as HidEnrolmentSubject;
-  form.subjectId = "";
-  form.subjectRole = "";
-  form.name = "";
-  residentConflict.value = null;
-
-  // Each list is fetched on first use and then kept, so flipping between the
-  // three options costs one request each rather than one per flip.
-  if (isMemberSubject.value && !membersLoaded.value) {
-    await loadMemberCandidates();
-  }
-  if (isProviderSubject.value && !providersLoaded.value) {
-    await loadProviderCandidates();
-  }
-}
+const facialEnrolled = ref(false);
 
-/* The staff equivalent of `onResidentChanged`. */
-async function onMemberChanged() {
-  const candidate = memberCandidates.value.find(
-    (item) => String(item.subjectId) === String(form.subjectId)
+function hasFacialEnrollment(user?: HidUser | null) {
+  return Boolean(
+    user?.metadata?.facialEnrolled ||
+    user?.metadata?.facialData ||
+    user?.metadata?.imageTimestamp
   );
-  form.name = String(candidate?.name ?? "");
-  form.subjectRole = String(candidate?.subtitle ?? "");
-  await checkSubjectEnrollment();
 }
-
-const blockPlaceholder = computed(() => {
-  if (loadingOccupancy.value) return "Loading...";
-  if (occupancyLoaded.value && !blockOptions.value.length) {
-    return "No occupied units at this site";
-  }
-  return "Select block";
+const removePinRequested = ref(false);
+const snackbar = reactive({
+  show: false,
+  color: "success",
+  message: "",
 });
 
-const unitResidentPlaceholder = computed(() => {
-  if (!form.unit) return "Select a unit first";
-  if (loadingUnitPeople.value) return "Loading residents...";
-  if (enrollableUnitPeople.value.length) return "Select a resident";
-  // The two empty cases are different problems with different fixes, so they
-  // do not share a sentence: nobody lives here, versus nobody here can be
-  // enrolled yet. `unitResidentNote` carries the detail for the second.
-  return unitPeople.value.length
-    ? "No resident here can be enrolled yet"
-    : "No residents in this unit";
+const form = reactive({
+  reader: "",
+  block: "",
+  level: "",
+  unit: "",
+  name: "",
+  hidUserId: "",
+  registration: "",
+  isAdministrator: false,
+  accessPin: "",
+  photoPreview: "",
+  subjectCategory: "resident" as THidPermissionCategory,
+  subjectId: "",
 });
 
-// Names the HID user that is in the way, so the operator can go and edit it
-// rather than being told only that something is wrong.
-const residentConflictMessage = computed(() => {
-  const conflict = residentConflict.value;
-  if (!conflict) return "";
-  const label = [getName(conflict), formatHidUid(conflict.hidUserId)]
-    .filter(Boolean)
-    .join(" · ");
-  return label
-    ? `Already enrolled on this reader as ${label}. Edit that HID user instead of enrolling again.`
-    : "Already enrolled on this reader. Edit that HID user instead of enrolling again.";
-});
+const route = useRoute();
+const orgId = computed(() => String(route.params.org || ""));
+const permissionCandidates = ref<THidPermissionCandidate[]>([]);
+const loadingSubjects = ref(false);
+const subjectCategoryOptions = [
+  { title: "Resident", value: "resident" },
+  { title: "Property management", value: "property_management" },
+  { title: "Service provider", value: "service_provider" },
+];
+const subjectOptions = computed(() => permissionCandidates.value.map((candidate) => ({
+  title: candidate.subtitle ? `${candidate.name} · ${candidate.subtitle}` : candidate.name,
+  value: candidate.subjectId,
+})));
 
 const cardForm = reactive({
   cardType: "pacs" as "pacs" | "csn",
@@ -2040,37 +705,23 @@ const cardForm = reactive({
 });
 
 const cardReader = computed(() => {
-  const readerId = String(
-    cardUser.value?.reader || selectedReaderId.value || ""
-  );
-  return (
-    readers.value.find((reader) => String(reader._id) === readerId) || null
-  );
+  const readerId = String(cardUser.value?.reader || selectedReaderId.value || "");
+  return readers.value.find((reader) => String(reader._id) === readerId) || null;
 });
-const cardProfileConfigured = computed(() =>
-  ["pacs", "csn", "csn_for_mifare"].includes(
-    String(cardReader.value?.cardReadingMode || "")
-  )
-);
-const hybridCardProfile = computed(
-  () => cardReader.value?.cardReadingMode === "csn_for_mifare"
-);
+const cardProfileConfigured = computed(() => ["pacs", "csn", "csn_for_mifare"].includes(
+  String(cardReader.value?.cardReadingMode || ""),
+));
+const hybridCardProfile = computed(() => cardReader.value?.cardReadingMode === "csn_for_mifare");
 const hybridCardTypeOptions = [
   { title: "MIFARE card (CSN)", value: "csn" },
   { title: "Other card (PACS)", value: "pacs" },
 ];
 const cardProfileLabel = computed(() => {
   const mode = String(cardReader.value?.cardReadingMode || "unconfigured");
-  if (mode === "pacs")
-    return `PACS · ${(cardReader.value?.pacsFormat || "raw").toUpperCase()}`;
-  if (mode === "csn")
-    return `CSN · ${(
-      cardReader.value?.csnByteOrder || "msb"
-    ).toUpperCase()} first`;
+  if (mode === "pacs") return `PACS · ${(cardReader.value?.pacsFormat || "raw").toUpperCase()}`;
+  if (mode === "csn") return `CSN · ${(cardReader.value?.csnByteOrder || "msb").toUpperCase()} first`;
   if (mode === "csn_for_mifare") {
-    return `PACS for non-MIFARE cards · CSN for MIFARE (${(
-      cardReader.value?.csnByteOrder || "msb"
-    ).toUpperCase()} first)`;
+    return `PACS for non-MIFARE cards · CSN for MIFARE (${(cardReader.value?.csnByteOrder || "msb").toUpperCase()} first)`;
   }
   return "Configure the card data mode on the HID Reader screen before assigning a card.";
 });
@@ -2087,8 +738,6 @@ const userHeaders = [
   { title: "Name", value: "name", sortable: false },
   { title: "Facial Data", value: "facialData", sortable: false },
   { title: "UID", value: "hidUserId", sortable: false },
-  // Reads in the same order the dialog asks for them: UID then registration.
-  { title: "Registration No.", value: "registration", sortable: false },
   { title: "Status", value: "status", sortable: false },
   { title: "", value: "action-table", sortable: false },
 ];
@@ -2100,12 +749,8 @@ const cardHeaders = [
   { title: "", value: "action-table", sortable: false },
 ];
 
-const tableTitle = computed(() =>
-  props.cardManagement ? "HID Cards" : "HID Users"
-);
-const tableHeaders = computed(() =>
-  props.cardManagement ? cardHeaders : userHeaders
-);
+const tableTitle = computed(() => props.cardManagement ? "HID Cards" : "HID Users");
+const tableHeaders = computed(() => props.cardManagement ? cardHeaders : userHeaders);
 
 /**
  * The list is paged on the SERVER, so the shared pager only moves the cursor -
@@ -2122,45 +767,14 @@ function reloadUsersFromFirstPage() {
   loadUsers();
 }
 
-/**
- * Typing is the search.
- *
- * The field used to reload on `@keyup.enter` and on nothing else, so a screen
- * that looks like every other search box did nothing at all unless you guessed
- * that Enter was required - no request left the browser.
- *
- * Debounced, because each reload is a login/load/logout round trip to a reader
- * over a VPN, not a database query. Enter still works and skips the wait.
- */
-const SEARCH_DEBOUNCE_MS = 400;
-let searchDebounce: ReturnType<typeof setTimeout> | undefined;
-
-function onSearchInput() {
-  clearTimeout(searchDebounce);
-  searchDebounce = setTimeout(reloadUsersFromFirstPage, SEARCH_DEBOUNCE_MS);
-}
-
-function onSearchSubmit() {
-  clearTimeout(searchDebounce);
-  reloadUsersFromFirstPage();
-}
-
-watch(search, onSearchInput);
-onBeforeUnmount(() => clearTimeout(searchDebounce));
-
 const readerOptions = computed(() =>
   readers.value.map((reader) => ({
-    title: `${reader.name || reader.deviceId || reader._id} — ${
-      reader.portalName || "Portal not configured"
-    }`,
+    title: `${reader.name || reader.deviceId || reader._id} — ${reader.portalName || "Portal not configured"}`,
     value: reader._id,
   }))
 );
-const selectedReader = computed(
-  () =>
-    readers.value.find(
-      (reader) => reader._id === (selectedReaderId.value || form.reader)
-    ) || null
+const selectedReader = computed(() =>
+  readers.value.find((reader) => reader._id === (selectedReaderId.value || form.reader)) || null,
 );
 
 const pageRange = computed(() => {
@@ -2187,28 +801,15 @@ async function loadReaders() {
   const response = await getReaders({ site: props.site, page: 1, limit: 100 });
   const responseRecord = toRecord(response);
   const responseData = toRecord(responseRecord.data);
-  const items =
-    responseRecord.items ?? responseData.items ?? responseData.readers ?? [];
+  const items = responseRecord.items ?? responseData.items ?? responseData.readers ?? [];
   readers.value = (Array.isArray(items) ? items : [])
     .map(toHidReader)
     .filter((reader): reader is HidReader => reader !== null);
-  /* Shared with every other HID screen — see `useHidReaderSelection`. The
-     resolver refuses a remembered reader that is not this site's, so a site
-     switch or a deleted reader falls back to the first rather than querying
-     an id the site does not own. */
-  selectedReaderId.value = resolveForSite(props.site, readers.value);
+  if (!selectedReaderId.value && readers.value.length) {
+    selectedReaderId.value = readers.value[0]._id;
+  }
 }
 
-/**
- * Discards a load whose answer arrives after a newer one started.
- *
- * Each reload is a slow round trip to a reader over a VPN, and typing now fires
- * them, so "abc" can have three in flight at once. Without this the reply to
- * "a" can land last and repopulate the table with the wrong rows. Same monotonic
- * counter `HidAccessLogDashboard` uses.
- */
-const loadUsersSequence = ref(0);
-
 async function loadUsers() {
   if (!selectedReaderId.value) {
     users.value = [];
@@ -2218,83 +819,32 @@ async function loadUsers() {
     return;
   }
 
-  const sequence = loadUsersSequence.value + 1;
-  loadUsersSequence.value = sequence;
   loading.value = true;
   try {
-    // `userType: "user"` is REQUIRED here, not a nicety. The reader keeps
-    // visitors in the same `users` table, marked `user_type_id = 1`, and the
-    // API's default is `all`. Visitor rows are written by our own visitor-QR
-    // issuance and are never removed - revoke only pushes `end_time` into the
-    // past - so without this filter the enrollment roster counts every visitor
-    // pass ever issued and drifts further from the reader's own Users screen
-    // with each one. This screen enrolls and edits real people; visitors are
-    // owned by the visitor module.
-    let clientFiltersVisitors = false;
-    let response: unknown;
-    try {
-      response = await getReaderUsers(selectedReaderId.value, {
-        page: page.value,
-        limit: limit.value,
-        search: search.value.trim(),
-        status: status.value.toLowerCase() as "mapped" | "unmapped" | "",
-        userType: "user",
-      });
-    } catch (error: unknown) {
-      if (!isUnsupportedUserTypeFilter(error)) throw error;
-
-      // A deployed API can lag behind this shared layer. Keep the roster
-      // correct on one that has not added `userType` yet, the same way
-      // HidReaderUserRoster does, rather than failing the whole screen.
-      clientFiltersVisitors = true;
-      response = await getReaderUsers(selectedReaderId.value, {
-        page: 1,
-        limit: 100,
-        search: search.value.trim(),
-        status: status.value.toLowerCase() as "mapped" | "unmapped" | "",
-      });
-    }
+    const response = await getReaderUsers(selectedReaderId.value, {
+      page: page.value,
+      limit: limit.value,
+      search: search.value.trim(),
+      status: status.value.toLowerCase() as "mapped" | "unmapped" | "",
+    });
     const responseRecord = toRecord(response);
     const responseData = toRecord(responseRecord.data);
     const responseItems = responseRecord.items ?? responseData.items ?? [];
-    const allItems = (Array.isArray(responseItems) ? responseItems : []).map(
-      toHidUser
-    );
-    const matchingItems = clientFiltersVisitors
-      ? allItems.filter((user) => !isVisitorUser(user))
-      : allItems;
-    const pageStart = (page.value - 1) * limit.value;
-    const pageItems = clientFiltersVisitors
-      ? matchingItems.slice(pageStart, pageStart + limit.value)
-      : matchingItems;
-    if (sequence !== loadUsersSequence.value) return;
+    const pageItems = (Array.isArray(responseItems) ? responseItems : []).map(toHidUser);
     administratorUserIds.value = new Set(
       pageItems
         .filter((user) => user.isAdministrator === true)
         .map((user) => toHidNumericId(user.hidUserId))
-        .filter((userId: number | undefined): userId is number =>
-          Boolean(userId)
-        )
+        .filter((userId: number | undefined): userId is number => Boolean(userId)),
     );
     users.value = pageItems;
-    total.value = clientFiltersVisitors
-      ? matchingItems.length
-      : Number(
-          responseRecord.total ?? responseData.total ?? users.value.length
-        );
-    pages.value = clientFiltersVisitors
-      ? Math.max(1, Math.ceil(total.value / limit.value))
-      : Number(responseRecord.pages ?? responseData.pages ?? 1);
-    // The server's `pageRange` counts the unfiltered page, so it cannot be
-    // trusted once this screen has done the filtering itself.
-    serverPageRange.value = clientFiltersVisitors
-      ? ""
-      : String(responseRecord.pageRange ?? responseData.pageRange ?? "");
+    total.value = Number(responseRecord.total ?? responseData.total ?? users.value.length);
+    pages.value = Number(responseRecord.pages ?? responseData.pages ?? 1);
+    serverPageRange.value = String(responseRecord.pageRange ?? responseData.pageRange ?? "");
     if (props.cardManagement) {
       await loadVisibleUserCards(users.value);
     }
   } catch (error) {
-    if (sequence !== loadUsersSequence.value) return;
     console.error("Unable to load HID reader users:", error);
     showToast("Unable to load HID users from reader.", "error");
     users.value = [];
@@ -2305,12 +855,11 @@ async function loadUsers() {
     pages.value = 1;
     serverPageRange.value = "";
   } finally {
-    // Only the newest load owns the spinner; an older one finishing must not
-    // clear it while that newer one is still running.
-    if (sequence === loadUsersSequence.value) loading.value = false;
+    loading.value = false;
   }
 }
 
+
 function resetForm() {
   form.reader = selectedReaderId.value || readers.value[0]?._id || "";
   form.block = "";
@@ -2321,10 +870,6 @@ function resetForm() {
   form.registration = "";
   form.isAdministrator = false;
   form.accessPin = "";
-  form.password = "";
-  passwordSet.value = false;
-  showPassword.value = false;
-  removePasswordRequested.value = false;
   pinEnrolled.value = false;
   showPin.value = false;
   removePinRequested.value = false;
@@ -2332,201 +877,34 @@ function resetForm() {
   selectedPhotoFile.value = null;
   removePhotoRequested.value = false;
   facialEnrolled.value = false;
-  // The type the operator last enrolled, not a hard "resident": somebody adding
-  // a shift of guards should not re-pick Member for each one.
-  form.subjectCategory = REMEMBERED_SUBJECT_CATEGORY.value;
+  form.subjectCategory = "resident";
   form.subjectId = "";
-  form.subjectRole = "";
-  residentConflict.value = null;
-  checkingResident.value = false;
-}
-
-/** Surface what the API actually said - a bare "unable to load" hides the
- *  difference between a permission refusal, a bad id and a server fault. */
-function apiReason(error: unknown) {
-  const record = toRecord(error);
-  const data = toRecord(record.data);
-  return (
-    toText(data.message) ||
-    toText(record.message) ||
-    toText(record.statusMessage)
-  );
 }
 
-// Called when the Block select is first touched, not when the dialog opens.
-async function ensureOccupancy() {
-  if (!props.site || occupancyLoaded.value || loadingOccupancy.value) return;
-  loadingOccupancy.value = true;
-  try {
-    const response = toRecord(
-      await getOccupiedStructure(props.site, {
-        type: OCCUPANT_TYPES,
-        status: "active",
-      })
-    );
-    const data = toRecord(response.data);
-    const blocks = response.blocks ?? data.blocks ?? [];
-    occupiedBlocks.value = (
-      Array.isArray(blocks) ? blocks : []
-    ) as OccupiedBlock[];
-    occupancyLoaded.value = true;
-  } catch (error: unknown) {
-    console.error("Unable to load occupied units:", error);
-    occupiedBlocks.value = [];
-    const reason = apiReason(error);
-    showToast(
-      reason
-        ? `Unable to load units: ${reason}`
-        : "Unable to load units for this site.",
-      "error"
-    );
-  } finally {
-    loadingOccupancy.value = false;
+async function loadSubjectCandidates() {
+  const readerId = form.reader || selectedReaderId.value;
+  if (!readerId || !orgId.value) {
+    permissionCandidates.value = [];
+    return;
   }
-}
-
-async function loadUnitPeople() {
-  unitPeople.value = [];
-  if (!form.unit) return;
-  loadingUnitPeople.value = true;
+  loadingSubjects.value = true;
   try {
-    const response = await getPeopleByUnit(form.unit, {
-      status: "active",
-      type: OCCUPANT_TYPES,
+    const response = await getPermissionCandidates(props.site, {
+      orgId: orgId.value,
+      readerId,
+      category: form.subjectCategory,
+      page: 1,
+      limit: 500,
     });
-    const record = toRecord(response);
-    const rows = Array.isArray(response)
-      ? response
-      : record.data ?? record.items ?? [];
-    unitPeople.value = (Array.isArray(rows) ? rows : []) as UnitPerson[];
-  } catch (error: unknown) {
-    console.error("Unable to load residents for the unit:", error);
-    const reason = apiReason(error);
-    showToast(
-      reason
-        ? `Unable to load residents: ${reason}`
-        : "Unable to load residents for this unit.",
-      "error"
-    );
+    permissionCandidates.value = response.items ?? response.data?.items ?? [];
   } finally {
-    loadingUnitPeople.value = false;
+    loadingSubjects.value = false;
   }
 }
 
-function onBlockChanged() {
-  form.level = "";
-  form.unit = "";
-  unitPeople.value = [];
-  clearResidentSelection();
-}
-
-// Wrapper `@click`/`@focusin` on the Block select: load once, on first touch.
-async function onBlockOpened() {
-  await ensureOccupancy();
-}
-
-function onLevelChanged() {
-  form.unit = "";
-  unitPeople.value = [];
-  clearResidentSelection();
-}
-
-async function onUnitChanged() {
-  clearResidentSelection();
-  await loadUnitPeople();
-}
-
-function clearResidentSelection() {
+async function onSubjectCategoryChanged() {
   form.subjectId = "";
-  residentConflict.value = null;
-  // Name only ever mirrors a chosen resident, so it clears with the choice.
-  if (!selectedUser.value) form.name = "";
-}
-
-// The auto-fill the whole cascade exists for.
-async function onResidentChanged() {
-  const person = unitPeople.value.find(
-    (item) => String(item._id) === String(form.subjectId)
-  );
-  form.name = String(person?.name ?? "");
-  await checkSubjectEnrollment();
-}
-
-/**
- * The HID user this resident already holds on the selected reader, or null.
- *
- * `subject`, not `person`. The same resident is stored under different ids
- * depending on which screen wrote the row - the permissions screen keys on
- * their user account, this screen on the record the picker offered - so a
- * filter on one field alone reports "not enrolled" for somebody who plainly is.
- * `subject` follows the record to its account and matches every link field,
- * which is exactly what the server does before it accepts an enrollment.
- *
- * Reader-scoped by the endpoint itself.
- */
-async function findResidentIdentity(readerId: string, personId: string) {
-  const response = await getIdentities(readerId, {
-    page: 1,
-    // A resident should hold at most one, but ask for a few: on the edit screen
-    // the first row back can be the very identity being edited, and skipping it
-    // must not hide a real second one behind it.
-    limit: 10,
-    subject: personId,
-  });
-  const responseRecord = toRecord(response);
-  const responseData = toRecord(responseRecord.data);
-  const responseItems =
-    responseRecord.items ?? responseData.items ?? responseData.identities ?? [];
-  const identities = (Array.isArray(responseItems) ? responseItems : []).map(
-    toHidUser
-  );
-  const editingId = String(selectedUser.value?._id ?? "");
-
-  return (
-    identities.find(
-      (identity) => !editingId || String(identity._id ?? "") !== editingId
-    ) ?? null
-  );
-}
-
-/**
- * Sets `residentConflict` for the currently selected resident.
- *
- * Fails OPEN: if the lookup itself errors the operator is not blocked, because
- * the server refuses the duplicate anyway. This is a courtesy check that keeps
- * a doomed enrollment off the physical reader, not the guard itself.
- */
-/**
- * Is this subject already enrolled on this reader?
- *
- * Category-agnostic, since staff can be enrolled too. `findResidentIdentity`
- * queries the server's `subject` parameter, which is matched against every link
- * field - `person`, `member`, `serviceProvider`, `user` - so a member needs no
- * separate lookup. The server refuses a duplicate either way; this only puts the
- * refusal in front of the operator before the device is touched.
- */
-async function checkSubjectEnrollment() {
-  residentConflict.value = null;
-  const readerId =
-    selectedReaderId.value || form.reader || readers.value[0]?._id;
-  if (!readerId || !form.subjectId) return null;
-
-  checkingResident.value = true;
-  try {
-    residentConflict.value = await findResidentIdentity(
-      readerId,
-      form.subjectId
-    );
-    return residentConflict.value;
-  } catch (error: unknown) {
-    console.error(
-      "Unable to check whether this resident is already enrolled:",
-      error
-    );
-    return null;
-  } finally {
-    checkingResident.value = false;
-  }
+  await loadSubjectCandidates();
 }
 
 async function openEnroll() {
@@ -2538,16 +916,8 @@ async function openEnroll() {
   ]);
   form.hidUserId = hidUserId;
   form.registration = registration;
+  await loadSubjectCandidates();
   formDialog.value = true;
-
-  // `resetForm` restores the remembered type, so the dialog can open straight
-  // onto Member with an empty list. Loaded after the dialog is up, not before:
-  // the request must not delay it, and the picker carries its own loading
-  // placeholder. Fresh each opening, because staff change between them.
-  resetMemberCandidates();
-  resetProviderCandidates();
-  if (isMemberSubject.value) await loadMemberCandidates();
-  if (isProviderSubject.value) await loadProviderCandidates();
 }
 
 async function openEdit(user: HidUser) {
@@ -2561,59 +931,31 @@ async function openEdit(user: HidUser) {
   form.registration = user.registration ?? "";
   form.isAdministrator = hasAdministratorRule(user);
   form.accessPin = "";
-  form.password = "";
-  showPassword.value = false;
-  removePasswordRequested.value = false;
-  passwordSet.value = Boolean(user.metadata?.passwordSet);
   pinEnrolled.value = Boolean(user.metadata?.pinEnrolled);
   removePinRequested.value = false;
   form.photoPreview = "";
   facialEnrolled.value = hasFacialEnrollment(user);
-  /*
-   * Read in the order `createIdentity` validates the links, with one extra
-   * test. A `member` link is how BOTH a property-management member and a
-   * service provider's own employee are stored - the person's membership at
-   * this site - so the identity's `type` is what tells them apart. Without
-   * that test a contractor's edit would be headed "Member".
-   */
   form.subjectCategory = user.person
     ? "resident"
     : user.serviceProvider
-    ? "service_provider"
-    : user.member && String(user.type ?? "") === "contractor"
-    ? "service_provider_staff"
-    : "property_management";
-  form.subjectId = String(
-    user.person || user.member || user.serviceProvider || ""
-  );
-  // The resident this user already holds is not a conflict with itself. A real
-  // one only appears if the operator reassigns the row to somebody else.
-  residentConflict.value = null;
-  // The location is not drawn when editing, but it is still carried: these
-  // three form fields are what `saveUser` writes back and what `buildUnitLabel`
-  // resolves into the Unit column, so a save must not blank them.
-  //
-  // `ensureOccupancy` is what lets `buildUnitLabel` turn them back into names.
-  // The unit's residents are loaded too, because the Resident select IS drawn
-  // here and its options come from that list - without it the select shows the
-  // stored id instead of a name.
-  await ensureOccupancy();
-  if (form.unit) await loadUnitPeople();
+      ? "service_provider"
+      : "property_management";
+  form.subjectId = String(user.person || user.member || user.serviceProvider || "");
+  await loadSubjectCandidates();
   selectedPhotoFile.value = null;
   removePhotoRequested.value = false;
   formDialog.value = true;
 
   try {
-    const hidUserId = toHidNumericId(user.hidUserId);
-    const [pinStatus, passwordStatus] = await Promise.all([
-      getUserPinStatus(form.reader, hidUserId),
-      getUserPasswordStatus(form.reader, hidUserId),
-    ]);
-    pinEnrolled.value = Boolean(pinStatus?.data?.pinEnrolled);
-    passwordSet.value = Boolean(passwordStatus?.data?.passwordSet);
+    const status = await getUserPinStatus(
+      form.reader,
+      toHidNumericId(user.hidUserId),
+    );
+    pinEnrolled.value = Boolean(status?.data?.pinEnrolled);
   } catch {
     // Preserve the last known status if the reader is temporarily offline.
   }
+
 }
 
 function openView(user: HidUser) {
@@ -2688,55 +1030,16 @@ function onPhotoChange(event: Event) {
 async function saveUser() {
   const readerId =
     selectedReaderId.value || form.reader || readers.value[0]?._id;
-  // A resident is required to ENROL, because an identity has to be linked to
-  // somebody. It is not required to edit: the reader holds users we never
-  // enrolled, and changing a photo, a PIN or a password on one of those is a
-  // reader-side operation that has nothing to say about who they are. Demanding
-  // a resident there refuses a save for a field the dialog does not even draw.
-  const missing = !readerId
-    ? "a reader"
-    : !selectedUser.value && !form.subjectId
-    ? isResidentSubject.value
-      ? "a resident"
-      : isProviderSubject.value
-      ? "a person"
-      : "a member"
-    : !form.name
-    ? "a name"
-    : !form.hidUserId
-    ? "an ID"
-    : !form.registration
-    ? "a registration number"
-    : "";
-  if (missing) {
-    showToast(
-      `This HID user needs ${missing} before it can be saved.`,
-      "error"
-    );
+  if (!readerId || !form.name || !form.hidUserId || !form.registration || !form.subjectId) {
+    showToast("Please complete the required HID user fields.", "error");
     return;
   }
   if (form.accessPin && !/^\d{1,32}$/.test(form.accessPin)) {
-    showToast("PIN must contain numbers only.", "error");
-    return;
-  }
-  if (
-    selectedPhotoFile.value &&
-    (!selectedReader.value?.portalId || !selectedReader.value?.portalName)
-  ) {
-    showToast(
-      "Reconnect this HID reader and select a portal before enrolling facial recognition.",
-      "error"
-    );
+    showToast("Access PIN must contain numbers only.", "error");
     return;
   }
-
-  // Re-asked here, not trusted from the select: the dialog can sit open while
-  // somebody else enrolls the same resident, and the reader is only ever
-  // written to below this line. A duplicate caught here costs one request; the
-  // same duplicate caught by the server costs a created HID user and a rollback.
-  const alreadyEnrolled = await checkSubjectEnrollment();
-  if (alreadyEnrolled) {
-    showToast(residentConflictMessage.value, "error");
+  if (selectedPhotoFile.value && (!selectedReader.value?.portalId || !selectedReader.value?.portalName)) {
+    showToast("Reconnect this HID reader and select a portal before enrolling facial recognition.", "error");
     return;
   }
 
@@ -2753,17 +1056,22 @@ async function saveUser() {
       return;
     }
 
-    // The link is sent only when the form actually holds one. Sending
-    // `person: ""` is not "leave it alone", it is "clear it": the server reads
-    // an empty string as a link being removed and then refuses the write for
-    // having no subject at all. Omitting the keys is what makes it keep the
-    // subject the record already has.
-    const subjectLink = subjectLinkOf(form.subjectCategory, form.subjectId);
-
     const payload = {
       hidUserId: String(hidUser.id),
       registration: form.registration,
-      ...subjectLink,
+      person: form.subjectCategory === "resident" ? form.subjectId : "",
+      member: form.subjectCategory === "property_management" ? form.subjectId : "",
+      serviceProvider: form.subjectCategory === "service_provider" ? form.subjectId : "",
+      type: (form.subjectCategory === "resident"
+        ? "resident"
+        : form.subjectCategory === "service_provider"
+          ? "contractor"
+          : "staff") as
+        | "resident"
+        | "staff"
+        | "contractor"
+        | "visitor"
+        | "unknown",
       status: "active" as const,
       metadata: {
         name: form.name,
@@ -2780,7 +1088,6 @@ async function saveUser() {
         imageTimestamp: selectedUser.value?.metadata?.imageTimestamp || "",
         facialScores: selectedUser.value?.metadata?.facialScores || {},
         pinEnrolled: pinEnrolled.value,
-        passwordSet: passwordSet.value,
         hidPhysicalCards: selectedUser.value?.metadata?.hidPhysicalCards || [],
       },
     };
@@ -2790,22 +1097,17 @@ async function saveUser() {
       const facialResult = await syncFacialImage(readerId, hidUser.id);
       applyFacialResult(payload.metadata, facialResult);
       payload.metadata.pinEnrolled = await syncAccessPin(readerId, hidUser.id);
-      payload.metadata.passwordSet = await syncPassword(readerId, hidUser.id);
       if (selectedUser.value._id) {
         await updateIdentity(selectedUser.value._id, payload);
-      } else if (form.subjectId) {
+      } else {
         await saveIdentityOnReader(readerId, payload);
       }
-      // else: a user the reader holds and we have never linked. The photo, PIN
-      // and password above are already on the device; creating an identity for
-      // it would need a subject we deliberately no longer ask for here.
     } else {
       const created = await createHidUserOnReader(readerId, hidUser);
       if (created) newlyCreatedHidUserId = hidUser.id;
       const facialResult = await syncFacialImage(readerId, hidUser.id);
       applyFacialResult(payload.metadata, facialResult);
       payload.metadata.pinEnrolled = await syncAccessPin(readerId, hidUser.id);
-      payload.metadata.passwordSet = await syncPassword(readerId, hidUser.id);
       await saveIdentityOnReader(readerId, payload);
       selectedReaderId.value = readerId;
     }
@@ -2826,10 +1128,7 @@ async function saveUser() {
           where: { users: { id: newlyCreatedHidUserId } },
         });
       } catch (rollbackError) {
-        console.error(
-          "Unable to roll back the partially enrolled HID user:",
-          rollbackError
-        );
+        console.error("Unable to roll back the partially enrolled HID user:", rollbackError);
       }
     }
     console.error("Unable to save HID user:", error);
@@ -2844,25 +1143,6 @@ async function saveUser() {
   }
 }
 
-async function syncPassword(readerId: string, hidUserId: number) {
-  // Mirrors syncAccessPin. Removal wins over a typed value, and a blank field
-  // means "leave whatever is on the reader alone" - the hash cannot be read
-  // back, so blank can never mean "clear it".
-  if (removePasswordRequested.value) {
-    await deleteUserPassword(readerId, hidUserId);
-    passwordSet.value = false;
-    form.password = "";
-    return false;
-  }
-  if (form.password) {
-    await setUserPassword(readerId, hidUserId, form.password);
-    form.password = "";
-    passwordSet.value = true;
-    return true;
-  }
-  return passwordSet.value;
-}
-
 async function syncAccessPin(readerId: string, hidUserId: number) {
   if (removePinRequested.value) {
     await deleteUserPin(readerId, hidUserId);
@@ -2930,59 +1210,11 @@ function applyFacialResult(
   }
 }
 
-/**
- * THE IDENTITY ROW BEHIND A ROSTER ROW.
- *
- * This list is read from the READER (`getReaderUsers`), and `listReaderUsers`
- * builds each row out of the device's own `users` columns - it carries no
- * identity `_id` at all, so `toHidUser` leaves `_id` undefined for every row on
- * screen. A delete that only acted when `_id` was present therefore never
- * touched the database: the device user was destroyed and the identity stayed
- * `active`, with no error, because the guard was an `if` rather than a failure.
- *
- * That left the row orphaned, and an orphan is not inert. `findIdentityBySubject`
- * excludes only `status: "deleted"`, so it still answers "this person is already
- * enrolled on this reader" and REFUSES to enrol somebody the operator can no
- * longer see. The reconcile reads it too: `findProfileIdentity` finds the active
- * row and reuses its stored `hidUserId`, so the device user is rebuilt with the
- * same UID the operator just deleted, from an access grant that was never
- * removed because `deleteIdentity` never ran.
- *
- * Resolved the same way `saveUser` already resolves it, by the reader's own keys.
- */
-async function findIdentityIdForUser(readerId: string, user: HidUser) {
-  if (user._id) return user._id;
-  if (!readerId) return "";
-  try {
-    const identity = await findExistingIdentityOnReader(readerId, {
-      hidUserId: String(user.hidUserId ?? ""),
-      registration: String(user.registration ?? ""),
-      cardNo: String(user.cardNo ?? ""),
-      metadata: {},
-    });
-    return identity?._id ?? "";
-  } catch (error: unknown) {
-    // A lookup failure must not stop the device delete the operator asked for.
-    // The row stays behind and the next delete can clear it.
-    console.error(
-      "Unable to resolve the stored identity for this HID user:",
-      error
-    );
-    return "";
-  }
-}
-
 async function deleteUser() {
   if (!selectedUser.value) return;
 
   deleting.value = true;
   try {
-    // Resolved BEFORE the device user is destroyed: this reads our own records,
-    // and doing it first means a failure here costs nothing.
-    const identityId = await findIdentityIdForUser(
-      selectedReaderId.value,
-      selectedUser.value
-    );
     await syncHidUserRole(
       selectedReaderId.value,
       toHidNumericId(selectedUser.value.hidUserId),
@@ -2990,13 +1222,11 @@ async function deleteUser() {
     );
     await deleteUserPin(
       selectedReaderId.value,
-      toHidNumericId(selectedUser.value.hidUserId)
+      toHidNumericId(selectedUser.value.hidUserId),
     );
     await deleteHidUserFromReader(selectedReaderId.value, selectedUser.value);
-    if (identityId) {
-      // Soft-deletes the row AND removes the access grant that let this person
-      // through, which is what stops the next reconcile rebuilding them.
-      await deleteIdentity(identityId);
+    if (selectedUser.value._id) {
+      await deleteIdentity(selectedUser.value._id);
     }
     deleteDialog.value = false;
     await loadUsers();
@@ -3011,7 +1241,7 @@ async function deleteUser() {
 
 async function saveIdentityOnReader(
   readerId: string,
-  payload: HidIdentityPayload
+  payload: HidIdentityPayload,
 ) {
   const existingIdentity = await findExistingIdentityOnReader(
     readerId,
@@ -3023,11 +1253,7 @@ async function saveIdentityOnReader(
   }
 
   try {
-    await createIdentity(readerId, {
-      ...payload,
-      site: props.site,
-      ...(props.org ? { orgId: props.org } : {}),
-    });
+    await createIdentity(readerId, { ...payload, site: props.site });
   } catch (error: unknown) {
     const message = getHidErrorMessage(error);
     if (!message.toLowerCase().includes("already exists")) throw error;
@@ -3043,7 +1269,7 @@ async function saveIdentityOnReader(
 
 async function findExistingIdentityOnReader(
   readerId: string,
-  payload: HidIdentityPayload
+  payload: HidIdentityPayload,
 ) {
   const response = await getIdentities(readerId, {
     page: 1,
@@ -3052,11 +1278,8 @@ async function findExistingIdentityOnReader(
   });
   const responseRecord = toRecord(response);
   const responseData = toRecord(responseRecord.data);
-  const responseItems =
-    responseRecord.items ?? responseData.items ?? responseData.identities ?? [];
-  const identities = (Array.isArray(responseItems) ? responseItems : []).map(
-    toHidUser
-  );
+  const responseItems = responseRecord.items ?? responseData.items ?? responseData.identities ?? [];
+  const identities = (Array.isArray(responseItems) ? responseItems : []).map(toHidUser);
   const hidUserId = String(payload.hidUserId || "");
   const registration = String(payload.registration || "");
   const cardNo = String(payload.cardNo || "");
@@ -3073,7 +1296,7 @@ async function findExistingIdentityOnReader(
 
 async function createHidUserOnReader(
   readerId: string,
-  user: { id?: number; name: string; registration: string }
+  user: { id?: number; name: string; registration: string },
 ) {
   const existing = await getHidUserFromReader(readerId, user.id);
   if (existing) {
@@ -3107,7 +1330,7 @@ async function getHidUserFromReader(readerId: string, id: unknown) {
 
 async function updateHidUserOnReader(
   readerId: string,
-  user: { id?: number; name: string; registration: string }
+  user: { id?: number; name: string; registration: string },
 ) {
   const { id, ...values } = user;
   await runObjectOperation(readerId, {
@@ -3122,7 +1345,10 @@ async function updateHidUserOnReader(
   });
 }
 
-async function deleteHidUserFromReader(readerId: string, user: HidUser) {
+async function deleteHidUserFromReader(
+  readerId: string,
+  user: HidUser,
+) {
   const id = toHidNumericId(user.hidUserId);
   if (!readerId || !id) return;
 
@@ -3210,9 +1436,7 @@ async function getHidUserRole(readerId: string, userId: number) {
   return Array.isArray(roles) ? roles[0] : undefined;
 }
 
-function toHidUserObject(
-  identity: Pick<HidUser, "hidUserId" | "name" | "registration">
-) {
+function toHidUserObject(identity: Pick<HidUser, "hidUserId" | "name" | "registration">) {
   return {
     id: toHidNumericId(identity.hidUserId),
     name:
@@ -3223,23 +1447,6 @@ function toHidUserObject(
   };
 }
 
-function isVisitorUser(user: HidUser) {
-  // The reader marks visitors with `user_type_id = 1`; a real user leaves the
-  // field null. `metadata.hidUserTypeId` is what our API forwards it as.
-  return Number(user.metadata?.hidUserTypeId ?? user.user_type_id) === 1;
-}
-
-function isUnsupportedUserTypeFilter(error: unknown) {
-  const record = toRecord(error);
-  const data = toRecord(record.data);
-  const message = toText(data.message) || toText(record.message);
-  const normalized = message.toLowerCase();
-  return (
-    normalized.includes("usertype") &&
-    (normalized.includes("not allowed") || normalized.includes("unknown"))
-  );
-}
-
 function toHidNumericId(value: unknown) {
   const raw = String(value ?? "").trim();
   if (!raw) return undefined;
@@ -3268,19 +1475,16 @@ async function loadVisibleUserCards(items: HidUser[]) {
         const response = await getUserCards(selectedReaderId.value, hidUserId);
         const responseData = toRecord(toRecord(response).data);
         const cards = responseData.cards;
-        return [
-          String(hidUserId),
-          (Array.isArray(cards) ? cards : []).map(toHidCard),
-        ] as const;
+        return [String(hidUserId), (Array.isArray(cards) ? cards : []).map(toHidCard)] as const;
       } catch (error: unknown) {
         cardErrors[String(hidUserId)] = getHidErrorMessage(error);
         return [String(hidUserId), []] as const;
       }
-    })
+    }),
   );
 
   physicalCardsByUserId.value = Object.fromEntries(
-    entries.filter(([hidUserId]) => Boolean(hidUserId))
+    entries.filter(([hidUserId]) => Boolean(hidUserId)),
   );
   physicalCardErrorsByUserId.value = cardErrors;
 }
@@ -3292,16 +1496,12 @@ function getUserPhysicalCards(user: HidUser) {
 
 function getUserCardLoadError(user: HidUser) {
   const hidUserId = toHidNumericId(user.hidUserId);
-  return hidUserId
-    ? physicalCardErrorsByUserId.value[String(hidUserId)] || ""
-    : "";
+  return hidUserId ? physicalCardErrorsByUserId.value[String(hidUserId)] || "" : "";
 }
 
 async function openCardManager(user: HidUser) {
   cardUser.value = user;
-  const reader = readers.value.find(
-    (item) => String(item._id) === String(user.reader || selectedReaderId.value)
-  );
+  const reader = readers.value.find((item) => String(item._id) === String(user.reader || selectedReaderId.value));
   cardForm.cardType = reader?.cardReadingMode === "pacs" ? "pacs" : "csn";
   cardForm.facilityCode = "";
   cardForm.cardNumber = "";
@@ -3312,9 +1512,7 @@ async function openCardManager(user: HidUser) {
 }
 
 function getCardReaderAndUser() {
-  const readerId = String(
-    cardUser.value?.reader || selectedReaderId.value || ""
-  );
+  const readerId = String(cardUser.value?.reader || selectedReaderId.value || "");
   const hidUserId = toHidNumericId(cardUser.value?.hidUserId);
   return { readerId, hidUserId };
 }
@@ -3337,11 +1535,7 @@ async function loadPhysicalCards() {
   }
 }
 
-function parsePhysicalCardInteger(
-  value: string,
-  label: string,
-  maximum: bigint
-) {
+function parsePhysicalCardInteger(value: string, label: string, maximum: bigint) {
   if (!/^\d+$/.test(value.trim())) {
     showToast(`${label} must contain numbers only.`, "error");
     return null;
@@ -3362,27 +1556,14 @@ async function assignPhysicalCard() {
     | { cardType: "pacs"; facilityCode: string; cardNumber: string }
     | { cardType: "csn"; cardValue: string };
   if (cardForm.cardType === "pacs") {
-    const facilityCode = parsePhysicalCardInteger(
-      cardForm.facilityCode,
-      "Facility Code",
-      4294967295n
-    );
-    const cardNumber = parsePhysicalCardInteger(
-      cardForm.cardNumber,
-      "Card Number",
-      4294967295n
-    );
+    const facilityCode = parsePhysicalCardInteger(cardForm.facilityCode, "Facility Code", 4294967295n);
+    const cardNumber = parsePhysicalCardInteger(cardForm.cardNumber, "Card Number", 4294967295n);
     if (facilityCode === null || cardNumber === null) return;
     payload = { cardType: "pacs", facilityCode, cardNumber };
   } else {
-    const cardValue = parsePhysicalCardInteger(
-      cardForm.cardValue,
-      "CSN",
-      18446744073709551615n
-    );
+    const cardValue = parsePhysicalCardInteger(cardForm.cardValue, "CSN", 18446744073709551615n);
     if (cardValue === null || BigInt(cardValue) <= 0n) {
-      if (cardValue === "0")
-        showToast("CSN must be greater than zero.", "error");
+      if (cardValue === "0") showToast("CSN must be greater than zero.", "error");
       return;
     }
     payload = { cardType: "csn", cardValue };
@@ -3404,14 +1585,6 @@ async function assignPhysicalCard() {
   }
 }
 
-/**
- * Read a physical card by presenting it to the reader.
- *
- * The way most cards get assigned, because it is the only one that does not
- * require knowing the facility code and card number in advance - neither is
- * printed on the card, and an operator holding a blank fob has no way to look
- * them up. The reader listens for 30 seconds and reports what it read.
- */
 async function enrollPhysicalCard() {
   const { readerId, hidUserId } = getCardReaderAndUser();
   if (!readerId || !hidUserId) return;
@@ -3424,8 +1597,6 @@ async function enrollPhysicalCard() {
     await loadUsers();
     showToast("Physical HID card read and enrolled on the reader.");
   } catch (error: unknown) {
-    // Cancelling rejects the request above. That is the operator getting what
-    // they asked for, so it must not also be reported as a failure.
     if (!cardEnrollmentCancelled.value) {
       showToast(getHidErrorMessage(error), "error");
     }
@@ -3434,55 +1605,20 @@ async function enrollPhysicalCard() {
   }
 }
 
-/**
- * Stop the reader listening.
- *
- * Told to the DEVICE, not just the screen: abandoning the request on this side
- * would leave the reader waiting out its 30 seconds and enrolling whatever card
- * was presented in the meantime.
- */
-/**
- * Stop the reader listening, and hand the dialog straight back.
- *
- * Told to the DEVICE, not just the screen: abandoning the request on this side
- * would leave the reader waiting out its remaining seconds and enrolling
- * whatever card was presented in the meantime.
- *
- * The part worth understanding is what the ENROL request does next. The server
- * cannot tell a cancelled read from a failed one - the reader simply reports no
- * card - so the enrol that is still in flight ends as a 400, seconds after the
- * cancel. Waiting for it was the bug: Cancel appeared to do nothing until that
- * rejection finally arrived.
- *
- * So the dialog is released as soon as the DEVICE confirms it has stopped, and
- * the doomed enrol is left to land on its own. `cardEnrollmentCancelled` is set
- * before anything is awaited, which is what keeps its 400 silent.
- */
 async function cancelPhysicalCardEnrollment() {
   const { readerId } = getCardReaderAndUser();
   if (!readerId) return;
-  // Set first, awaited second: the enrol can reject at any point from here.
   cardEnrollmentCancelled.value = true;
-  cancellingCard.value = true;
   try {
     await cancelUserCardEnrollment(readerId);
-    // Only now, because the enrollment lock is released by the call above.
-    // Re-enabling Read at Reader any earlier invites a second attempt that
-    // the reader refuses with "already running".
-    enrollingCard.value = false;
     showToast("Physical HID card reading cancelled.");
   } catch (error: unknown) {
-    // The cancel itself failing is real and worth saying: the reader may still
-    // be listening, so the dialog stays in its reading state.
     showToast(getHidErrorMessage(error), "error");
-  } finally {
-    cancellingCard.value = false;
   }
 }
 
 async function removePhysicalCard(card: HidCard) {
-  if (!window.confirm(`Remove physical HID card ${formatPhysicalCard(card)}?`))
-    return;
+  if (!window.confirm(`Remove physical HID card ${formatPhysicalCard(card)}?`)) return;
   const { readerId, hidUserId } = getCardReaderAndUser();
   if (!readerId || !hidUserId || !card?.id) return;
 
@@ -3508,38 +1644,13 @@ function formatPhysicalCard(card: HidCard) {
 }
 
 function getPhysicalCardSubtitle(card: HidCard) {
-  const source =
-    card?.source === "reader"
-      ? "Read at reader"
-      : card?.source === "manual"
-      ? "Manual"
-      : "On device";
+  const source = card?.source === "reader" ? "Read at reader" : card?.source === "manual" ? "Manual" : "On device";
   return `${source} - Raw value ${card?.value || "N/A"}`;
 }
 
 function buildUnitLabel() {
-  // `form.block/level/unit` hold ObjectIds, so the label has to resolve them
-  // back to names through the occupancy tree. Joining the raw values would
-  // stamp "665f.../665f.../665f..." onto the record and into the Unit column.
-  const block = occupiedBlocks.value.find(
-    (item) => String(item._id ?? "") === form.block
-  );
-  const level = (block?.levels ?? []).find(
-    (item) => String(item._id ?? "") === form.level
-  );
-  const unit = (level?.units ?? []).find(
-    (item) => String(item._id ?? "") === form.unit
-  );
-  const parts = [
-    formatBlockTitle(block),
-    String(level?.name ?? ""),
-    String(unit?.name ?? ""),
-  ].filter(Boolean);
-  // Editing a record enrolled before the cascade existed: keep its stored
-  // label rather than blanking it.
-  if (!parts.length)
-    return String(selectedUser.value?.metadata?.unitLabel ?? "");
-  return parts.join(" / ");
+  const parts = [form.block, form.level, form.unit].filter(Boolean);
+  return parts.length ? `BLK ${parts.join("/")}` : "";
 }
 
 function getName(user?: HidUser | null) {
@@ -3626,28 +1737,27 @@ function normalizeHidUsers(response: unknown): HidUser[] {
   const responseRecord = toRecord(response);
   const responseData = toRecord(responseRecord.data);
   const nestedData = toRecord(responseData.data);
-  const items =
-    responseData.users ?? nestedData.users ?? responseRecord.users ?? [];
+  const items = responseData.users ?? nestedData.users ?? responseRecord.users ?? [];
 
   return Array.isArray(items)
     ? items.map((value) => {
         const user = toRecord(value);
         return {
-          _rowKey: `reader-${user.id}`,
-          hidUserId: String(user.id || ""),
-          rawHidUserId: toText(user.id),
-          registration: toText(user.registration),
-          userTypeId: toText(user.user_type_id),
-          cardNo: toText(user.card_value || user.cardNo),
+        _rowKey: `reader-${user.id}`,
+        hidUserId: String(user.id || ""),
+        rawHidUserId: toText(user.id),
+        registration: toText(user.registration),
+        userTypeId: toText(user.user_type_id),
+        cardNo: toText(user.card_value || user.cardNo),
+        name: toText(user.name),
+        metadata: {
           name: toText(user.name),
-          metadata: {
-            name: toText(user.name),
-            imageTimestamp: user.image_timestamp
-              ? String(user.image_timestamp)
-              : "",
-            lastAccessAt: fromUnixSeconds(user.last_access),
-            hidReaderSource: true,
-          },
+          imageTimestamp: user.image_timestamp
+            ? String(user.image_timestamp)
+            : "",
+          lastAccessAt: fromUnixSeconds(user.last_access),
+          hidReaderSource: true,
+        },
         };
       })
     : [];
@@ -3655,7 +1765,7 @@ function normalizeHidUsers(response: unknown): HidUser[] {
 
 function mergeReaderUsersWithIdentities(
   readerUsers: HidUser[],
-  identities: HidUser[]
+  identities: HidUser[],
 ) {
   const identityById = new Map<string, HidUser>();
   identities.forEach((identity) => {
@@ -3698,13 +1808,7 @@ function getMappingStatus(user: HidUser) {
 }
 
 function hasMappedRecord(user: HidUser) {
-  return Boolean(
-    user?.person ||
-      user?.user ||
-      user?.member ||
-      user?.serviceProvider ||
-      user?.visitor
-  );
+  return Boolean(user?.person || user?.user || user?.member || user?.serviceProvider || user?.visitor);
 }
 
 function formatDate(value?: string) {
@@ -3736,26 +1840,18 @@ function getHidErrorMessage(error: unknown) {
   const cause = toRecord(errorRecord.cause);
   const causeResponse = toRecord(cause.response);
   const data = toRecord(
-    errorRecord.data ||
-      response._data ||
-      response.data ||
-      cause.data ||
-      causeResponse._data
+    errorRecord.data || response._data || response.data || cause.data || causeResponse._data,
   );
 
   return toText(
-    data.message ||
-      data.error ||
-      data.statusMessage ||
-      errorRecord.statusMessage ||
-      errorRecord.message,
-    "Unable to save HID user."
+    data.message || data.error || data.statusMessage || errorRecord.statusMessage || errorRecord.message,
+    "Unable to save HID user.",
   );
 }
 
 function toRecord(value: unknown): Record<string, unknown> {
   return typeof value === "object" && value !== null && !Array.isArray(value)
-    ? (value as Record<string, unknown>)
+    ? value as Record<string, unknown>
     : {};
 }
 
@@ -3801,24 +1897,10 @@ function toHidCard(value: unknown): HidCard {
   return {
     ...card,
     id: toText(card.id) || undefined,
-    cardType:
-      card.cardType === "pacs" || card.cardType === "csn"
-        ? card.cardType
-        : undefined,
-    source:
-      card.source === "reader" ||
-      card.source === "manual" ||
-      card.source === "device"
-        ? card.source
-        : undefined,
+    cardType: card.cardType === "pacs" || card.cardType === "csn" ? card.cardType : undefined,
+    source: card.source === "reader" || card.source === "manual" || card.source === "device" ? card.source : undefined,
   };
 }
-
-/* Publish every change, including the seed above: a screen that had to fall
-   back to the first reader should leave the others agreeing with it. */
-watch(selectedReaderId, (value) => {
-  if (value) selectHidReader(props.site, value);
-});
 </script>
 
 <style scoped>
@@ -3855,6 +1937,12 @@ watch(selectedReaderId, (value) => {
   max-width: 320px;
 }
 
+.small-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text);
+}
+
 /* Was `#4f5a66` / `#e53935` - the same two greys on both themes. */
 .field-label {
   color: var(--text2);
@@ -3876,83 +1964,12 @@ watch(selectedReaderId, (value) => {
   line-height: 1.45;
 }
 
-/* Same line, saying the field is refused rather than explained. `--err` is the
-   token the required-field asterisk already uses. */
-.field-hint--error {
-  color: var(--err);
-}
-
-/* The bulk button and the sentence that says what it does. Stacked rather than
-   side by side: the sentence is the part that stops somebody expecting this to
-   enrol faces, so it must not be squeezed into a margin at narrow widths. */
-.hid-bulk-cta {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 4px;
-}
-
-.hid-bulk-cta .field-hint {
-  margin: 0;
-}
-
-/* Checkbox column only as wide as the control, so the three columns that carry
-   meaning keep the width. */
-.hid-bulk-table__check {
-  width: 44px;
-  padding-right: 0 !important;
-}
-
-.hid-bulk-table :deep(th) {
-  font-size: 12px;
-  font-weight: 700;
-  color: var(--muted);
-  white-space: nowrap;
-}
-
-.hid-bulk-table :deep(td) {
-  font-size: 13px;
-}
-
-/* Why this row cannot be unticked, on the row itself. A disabled checkbox with
-   no reason beside it reads as a broken control. */
-.hid-bulk-granted {
-  display: block;
-  color: var(--muted);
-  font-size: 11px;
-  font-weight: 600;
-}
-
 .photo-wrap {
   display: grid;
   place-items: center;
   margin-bottom: 14px;
 }
 
-.photo-facial {
-  margin: 10px 0 0;
-  text-align: center;
-}
-
-/* The same small muted word `.field-label` uses, so the caption reads as a
-   field label rather than as a second heading. */
-.photo-facial__label {
-  display: block;
-  color: var(--muted);
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.photo-facial__value {
-  display: block;
-  margin-top: 2px;
-  font-size: 13.5px;
-  font-weight: 500;
-  /* The reader's reference is a long unbroken number; let it wrap rather than
-     widen the dialog. */
-  word-break: break-all;
-}
-
 .photo-button {
   width: 120px;
   height: 120px;
@@ -3986,6 +2003,7 @@ watch(selectedReaderId, (value) => {
   box-shadow: var(--shadow-menu);
 }
 
+
 .admin-rule-indicator {
   display: inline-flex;
   vertical-align: middle;
@@ -4125,6 +2143,25 @@ watch(selectedReaderId, (value) => {
   color: var(--muted);
 }
 
+/* The split footer bar. The handoff does not draw one, so the SHAPE is the
+   screen's own; only the colours change - `#062d42` was a fixed navy that sat
+   on the dark card unchanged. Same treatment as panel 2. */
+.action-cancel,
+.action-submit {
+  flex: 1;
+  border-radius: 0;
+}
+
+.action-cancel {
+  background: var(--card);
+  color: var(--text2);
+}
+
+.action-submit {
+  background: var(--accent-strong);
+  color: var(--on-accent-strong);
+}
+
 @media (max-width: 960px) {
   .hid-user-filters :deep(.app-field),
   .hid-user-filters :deep(.app-select) {