@7365admin1/layer-common 4.73.1-staging.456 → 4.75.0

package/components/HidUserEnrollment.vue

@@ -67,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"
@@ -96,12 +96,6 @@
         <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>
-      </template>
-
       <!-- The shared chip. `utils/status.ts` now carries Mapped/Unmapped with
            the same tones this screen's private `getMappingStatusClass` gave
            them, so the map is one list rather than a fourth private copy. -->
@@ -172,12 +166,12 @@
     </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 }">
@@ -219,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"
@@ -237,96 +222,29 @@
             />
           </div>
 
-          <!-- 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">
-            <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="!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>
-          <!-- 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="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. -->
-          <div class="field-label">Name</div>
+          <div class="field-label">Name <span>*</span></div>
           <AppField
             v-model="form.name"
             aria-label="Name"
-            placeholder="Select a resident above"
-            readonly
+            placeholder="Enter name"
+            klass="mb-3"
+          />
+
+          <div class="field-label">Link To <span>*</span></div>
+          <AppSelect
+            v-model="form.subjectCategory"
+            :items="subjectCategoryOptions"
+            placeholder="Select person type"
+            klass="mb-3"
+            @update:model-value="onSubjectCategoryChanged"
+          />
+
+          <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"
           />
 
@@ -338,11 +256,11 @@
             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
@@ -352,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'"
@@ -362,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" />
@@ -377,62 +295,28 @@
           <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
@@ -444,9 +328,9 @@
     <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
@@ -463,22 +347,21 @@
             ><strong>{{
               selectedUser ? getMappingStatus(selectedUser) : "N/A"
             }}</strong>
-            <span>PIN</span
+            <span>Access PIN</span
             ><strong>{{ selectedUser?.metadata?.pinEnrolled ? "Configured" : "N/A" }}</strong>
-            <span>Password</span
-            ><strong>{{ selectedUser?.metadata?.passwordSet ? "Configured" : "N/A" }}</strong>
           </div>
         </v-card-text>
-        <v-card-actions class="screen-modal__footer">
+        <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>
@@ -569,11 +452,6 @@
             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"
@@ -592,16 +470,14 @@
             <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. -->
+        <v-card-actions>
+          <v-spacer />
           <AppButton variant="ghost" :disabled="enrollingCard" @click="cardDialog = false">
             Close
           </AppButton>
@@ -610,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>
@@ -651,13 +527,6 @@ const props = defineProps({
     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,
@@ -678,13 +547,11 @@ const {
   getUserPinStatus,
   setUserPin,
   deleteUserPin,
-  getUserPasswordStatus,
-  setUserPassword,
-  deleteUserPassword,
   runObjectOperation,
   createIdentity,
   updateIdentity,
   deleteIdentity,
+  getPermissionCandidates,
 } = useHidAmico();
 
 type HidMetadata = Record<string, unknown> & {
@@ -699,7 +566,6 @@ type HidMetadata = Record<string, unknown> & {
   lastAccessAt?: string;
   facialScores?: Record<string, unknown>;
   pinEnrolled?: boolean;
-  passwordSet?: boolean;
   hidPhysicalCards?: HidCard[];
 };
 
@@ -750,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("");
@@ -774,14 +639,7 @@ 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);
@@ -803,61 +661,13 @@ function hasFacialEnrollment(user?: HidUser | null) {
     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;
-};
-
 const form = reactive({
   reader: "",
   block: "",
@@ -868,7 +678,6 @@ const form = reactive({
   registration: "",
   isAdministrator: false,
   accessPin: "",
-  password: "",
   photoPreview: "",
   subjectCategory: "resident" as THidPermissionCategory,
   subjectId: "",
@@ -876,131 +685,18 @@ const form = reactive({
 
 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 ?? ""),
+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,
 })));
 
-// 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.`;
-});
-
-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 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";
-});
-
-// 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 cardForm = reactive({
   cardType: "pacs" as "pacs" | "csn",
   facilityCode: "",
@@ -1042,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 },
 ];
@@ -1073,32 +767,6 @@ 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"}`,
@@ -1137,23 +805,11 @@ async function loadReaders() {
   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 = [];
@@ -1163,54 +819,18 @@ 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)
@@ -1218,22 +838,13 @@ async function loadUsers() {
         .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 = [];
@@ -1244,9 +855,7 @@ 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;
   }
 }
 
@@ -1261,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;
@@ -1274,165 +879,32 @@ function resetForm() {
   facialEnrolled.value = false;
   form.subjectCategory = "resident";
   form.subjectId = "";
-  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 checkResidentEnrollment();
-}
-
-/**
- * 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.
- */
-async function checkResidentEnrollment() {
-  residentConflict.value = null;
-  const readerId = selectedReaderId.value || form.reader || readers.value[0]?._id;
-  if (!readerId || !form.subjectId || form.subjectCategory !== "resident") 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() {
@@ -1444,6 +916,7 @@ async function openEnroll() {
   ]);
   form.hidUserId = hidUserId;
   form.registration = registration;
+  await loadSubjectCandidates();
   formDialog.value = true;
 }
 
@@ -1458,10 +931,6 @@ 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 = "";
@@ -1472,31 +941,17 @@ async function openEdit(user: HidUser) {
       ? "service_provider"
       : "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();
+  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.
   }
@@ -1575,28 +1030,12 @@ 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
-      ? "a resident"
-      : !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");
+    showToast("Access PIN must contain numbers only.", "error");
     return;
   }
   if (selectedPhotoFile.value && (!selectedReader.value?.portalId || !selectedReader.value?.portalName)) {
@@ -1604,16 +1043,6 @@ async function saveUser() {
     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 checkResidentEnrollment();
-  if (alreadyEnrolled) {
-    showToast(residentConflictMessage.value, "error");
-    return;
-  }
-
   saving.value = true;
   let newlyCreatedHidUserId: number | undefined;
   try {
@@ -1627,33 +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 = form.subjectId
-      ? {
-        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",
-      }
-      : {};
-
     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,
@@ -1670,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 || [],
       },
     };
@@ -1680,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;
     }
@@ -1731,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);
@@ -1860,7 +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;
@@ -2054,21 +1447,6 @@ function toHidUserObject(identity: Pick<HidUser, "hidUserId" | "name" | "registr
   };
 }
 
-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;
@@ -2207,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;
@@ -2227,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");
     }
@@ -2237,49 +1605,15 @@ 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;
   }
 }
 
@@ -2315,21 +1649,8 @@ function getPhysicalCardSubtitle(card: HidCard) {
 }
 
 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) {
@@ -2580,12 +1901,6 @@ function toHidCard(value: unknown): HidCard {
     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>
@@ -2622,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);
@@ -2643,42 +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);
-}
-
 .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;
@@ -2852,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) {