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

package/components/HidUserEnrollment.vue

@@ -1,118 +1,184 @@
+<!--
+  HID USER ENROLLMENT - the people a reader will recognise.
+
+  Was a bespoke screen: an above-card toolbar, a raw `v-table` with six fixed
+  column widths, its own refresh strip, footer pager, empty state and three
+  private `status-*` chip palettes - about twenty-six literal hexes. Those
+  literals are why the screen had no dark theme; `#0a2638` on the dark card
+  measures 1.07:1.
+
+  It is the design's standard table screen, so it is drawn with the shared one:
+  `TableMain` supplies the page heading, the card, the in-card toolbar, the
+  uppercase header row, the row spec and the pager; the reader picker, search
+  and status filter move onto the card's `extension` row. Every column, action,
+  dialog and handler is unchanged - the same `users` still feed it and the
+  overflow menu still opens the same three dialogs.
+
+  The handoff draws no HID table, so it states no column proportions - the
+  table takes `TableMain`'s automatic layout, as panel 2 does, and the screen's
+  own fixed 24/20/12/20/16/8 % are dropped rather than carried over.
+-->
 <template>
   <section class="hid-user-enrollment">
-    <div class="toolbar">
-      <v-btn
-        rounded="xl"
-        class="text-none enroll-button"
-        variant="flat"
-        prepend-icon="mdi-account-plus"
-        @click="openEnroll"
-      >
-        Enroll
-      </v-btn>
-
-      <v-select
-        v-if="readers.length > 1"
-        v-model="selectedReaderId"
-        :items="readerOptions"
-        item-title="title"
-        item-value="value"
-        variant="outlined"
-        density="compact"
-        hide-details
-        class="reader-input"
-        @update:model-value="loadUsers"
-      />
-
-      <div class="toolbar-spacer" />
-
-      <v-text-field
-        v-model="search"
-        placeholder="Search"
-        variant="outlined"
-        density="compact"
-        hide-details
-        class="search-input"
-        prepend-inner-icon="mdi-magnify"
-        @keyup.enter="loadUsers"
-      />
-
-      <v-select
-        v-model="status"
-        :items="statusOptions"
-        variant="outlined"
-        density="compact"
-        hide-details
-        class="status-input"
-        @update:model-value="loadUsers"
-      />
-    </div>
-
-    <v-card flat border class="table-card">
-      <div class="table-refresh">
-        <v-btn icon="mdi-refresh" variant="text" density="comfortable" :loading="loading" @click="loadUsers" />
-        <div class="page-count">{{ pageRange }}</div>
-      </div>
-
-      <div class="table-body">
-        <v-table>
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Facial Data</th>
-              <th>UID</th>
-              <th>Status</th>
-              <th class="text-right"></th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="user in users" :key="user._rowKey || user._id || user.hidUserId">
-              <td>{{ getName(user) }}</td>
-              <td>
-                <v-avatar v-if="getUserImageSrc(user)" size="34" rounded="lg" class="hid-face-avatar">
-                  <v-img :src="getUserImageSrc(user)" cover />
-                </v-avatar>
-                <span v-else>{{ getFacialData(user) }}</span>
-              </td>
-              <td>{{ formatHidUid(user.hidUserId) || "N/A" }}</td>
-              <td>
-                <v-chip
-                  size="small"
-                  variant="flat"
-                  class="status-chip"
-                  :class="getMappingStatusClass(user)"
-                >
-                  {{ getMappingStatus(user) }}
-                </v-chip>
-              </td>
-              <td class="text-right">
-                <v-menu>
-                  <template #activator="{ props: menuProps }">
-                    <v-btn v-bind="menuProps" icon="mdi-dots-vertical" variant="text" density="comfortable" />
-                  </template>
-
-                  <v-list density="compact" min-width="150">
-                    <v-list-item title="View" @click="openView(user)" />
-                    <v-list-item title="Edit" @click="openEdit(user)" />
-                    <v-list-item title="Delete" class="text-error" @click="openDelete(user)" />
-                  </v-list>
-                </v-menu>
-              </td>
-            </tr>
-          </tbody>
-        </v-table>
-
-        <div v-if="!users.length" class="empty-state">
-          No HID users enrolled yet.
+    <!-- Staging's portal banner (1e6224e), kept whole: it names the portal the
+         selected reader is bound to and warns when it has none. It sat above
+         the old table card, so it stays above the shared one. -->
+    <v-alert
+      v-if="selectedReader"
+      :type="selectedReader.portalId && selectedReader.portalName ? 'info' : 'warning'"
+      variant="tonal"
+      density="compact"
+      class="mb-4"
+      icon="mdi-door-open"
+    >
+      Access Reader: {{ selectedReader.name || "HID Reader" }} · Access Portal:
+      {{ selectedReader.portalName || "Not configured" }}
+    </v-alert>
+
+    <TableMain
+      :title="tableTitle"
+      :headers="tableHeaders"
+      :items="users"
+      :loading="loading"
+      :items-per-page="-1"
+      :page="page"
+      :pages="pages"
+      :page-range="pageRange"
+      item-value="_rowKey"
+      show-header
+      @refresh="loadUsers"
+      @update:page="goToPage"
+    >
+      <template v-if="!props.cardManagement" #actions>
+        <AppButton icon="mdi-account-plus" @click="openEnroll">Enroll</AppButton>
+      </template>
+
+      <!-- The design puts filters on their own full-width row under the
+           toolbar, which is what `extension` is. -->
+      <template #extension>
+        <div class="app-filter-row hid-user-filters">
+          <AppSelect
+            v-if="readers.length"
+            v-model="selectedReaderId"
+            class="reader-select"
+            :items="readerOptions"
+            @update:model-value="loadUsers"
+          />
+          <AppField
+            v-model="search"
+            search
+            placeholder="Search"
+            @keyup.enter="loadUsers"
+          />
+          <AppSelect
+            v-if="!props.cardManagement"
+            v-model="status"
+            :items="statusOptions"
+            placeholder="Status"
+            clearable
+            @update:model-value="loadUsers"
+          />
         </div>
-      </div>
-
-      <div class="table-footer">
-        <span>{{ pageRange }}</span>
-        <v-btn icon="mdi-chevron-left" variant="text" density="comfortable" :disabled="page <= 1" @click="page--; loadUsers()" />
-        <v-btn icon="mdi-chevron-right" variant="text" density="comfortable" :disabled="page >= pages" @click="page++; loadUsers()" />
-      </div>
-    </v-card>
+      </template>
+
+      <template #[`item.name`]="{ item }">
+        <span class="app-cell--strong">{{ getName(item) }}</span>
+      </template>
+
+      <!-- The face thumbnail, unchanged. It prints whatever `getUserImageSrc`
+           already returned; this screen does not read or export a template. -->
+      <template #[`item.facialData`]="{ item }">
+        <v-avatar
+          v-if="getUserImageSrc(item)"
+          size="34"
+          rounded="lg"
+          class="hid-face-avatar"
+        >
+          <v-img :src="getUserImageSrc(item)" cover />
+        </v-avatar>
+        <span v-else class="app-cell--muted">{{ getFacialData(item) }}</span>
+      </template>
+
+      <template #[`item.hidUserId`]="{ item }">
+        <span class="app-cell--num">{{ formatHidUid(item.hidUserId) || "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. -->
+      <template #[`item.status`]="{ item }">
+        <StatusChip :status="getMappingStatus(item)" />
+      </template>
+
+      <template #[`item.isAdministrator`]="{ item }">
+        <v-icon
+          :icon="item.isAdministrator ? 'mdi-check-circle' : 'mdi-close-circle'"
+          :class="[
+            'admin-rule-indicator',
+            item.isAdministrator
+              ? 'admin-rule-indicator--enabled'
+              : 'admin-rule-indicator--disabled',
+          ]"
+          :aria-label="item.isAdministrator ? 'Administrator' : 'Not administrator'"
+          size="22"
+        />
+      </template>
+
+      <template #[`item.cards`]="{ item }">
+        <div v-if="getUserPhysicalCards(item).length" class="hid-card-cell">
+          <span
+            v-for="card in getUserPhysicalCards(item)"
+            :key="card.id"
+            class="hid-card-cell__item"
+          >
+            {{ formatPhysicalCard(card) }}
+          </span>
+        </div>
+        <span v-else class="app-cell--muted">No card</span>
+      </template>
+
+      <template #[`item.action-table`]="{ item }">
+        <AppButton
+          v-if="props.cardManagement"
+          variant="secondary"
+          icon="mdi-card-account-details-outline"
+          @click="openCardManager(item)"
+        >
+          Manage
+        </AppButton>
+        <v-menu v-else>
+          <template #activator="{ props: menuProps }">
+            <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="Delete"
+              class="text-error"
+              @click="openDelete(item)"
+            />
+          </v-list>
+        </v-menu>
+      </template>
+
+      <!-- The screen's own sentence, kept: the shared empty state says "No data
+           available", which is less useful on a screen whose whole point is
+           that nobody has been enrolled yet. -->
+      <template #no-data>
+        <div class="table-card__empty">
+          <v-icon
+            :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." }}
+          </span>
+        </div>
+      </template>
+    </TableMain>
 
     <v-dialog v-model="formDialog" max-width="420" persistent>
       <v-card rounded="lg">
@@ -125,109 +191,294 @@
             <v-menu>
               <template #activator="{ props: menuProps }">
                 <button v-bind="menuProps" class="photo-button" type="button">
-                  <v-img v-if="form.photoPreview" :src="form.photoPreview" cover class="photo-preview" />
+                  <v-img
+                    v-if="form.photoPreview"
+                    :src="form.photoPreview"
+                    cover
+                    class="photo-preview"
+                  />
                   <span v-if="form.photoPreview" class="photo-edit-icon">
                     <v-icon icon="mdi-pencil" size="16" />
                   </span>
                   <template v-else>
-                    <v-icon icon="mdi-account-plus" size="40" color="#a4acb5" />
+                    <!-- Was `color="#a4acb5"`, the same grey on both themes.
+                         `.photo-button` already sets `--muted`, so it inherits. -->
+                    <v-icon icon="mdi-account-plus" size="40" />
                     <span>Add Photo</span>
                   </template>
                 </button>
               </template>
               <v-list density="compact" min-width="190">
                 <v-list-item title="Browse" @click="triggerPhotoInput" />
-                <v-list-item title="Take Photo using Camera" @click="triggerPhotoInput" />
+                <v-list-item
+                  title="Take Photo using Camera"
+                  @click="triggerCameraInput"
+                />
+                <v-list-item
+                  v-if="form.photoPreview"
+                  title="Remove Photo"
+                  class="text-error"
+                  @click="removePhoto"
+                />
               </v-list>
             </v-menu>
-            <input ref="photoInput" type="file" accept="image/*" class="hidden-input" @change="onPhotoChange" />
+            <input
+              ref="photoInput"
+              type="file"
+              accept="image/*"
+              class="hidden-input"
+              @change="onPhotoChange"
+            />
           </div>
 
           <div class="field-label">Name <span>*</span></div>
-          <v-text-field
+          <AppField
             v-model="form.name"
             aria-label="Name"
             placeholder="Enter name"
-            density="compact"
-            variant="outlined"
-            hide-details="auto"
-            class="mb-3"
+            klass="mb-3"
           />
 
           <div class="field-label">ID</div>
-          <v-text-field
-            v-model="form.hidUserId"
-            aria-label="ID"
-            density="compact"
-            variant="outlined"
-            hide-details="auto"
-            readonly
-            class="mb-3"
-          />
+          <AppField v-model="form.hidUserId" aria-label="ID" readonly klass="mb-3" />
 
           <div class="field-label">Registration No. <span>*</span></div>
-          <v-text-field
+          <AppField
             v-model="form.registration"
             aria-label="Registration No."
             placeholder="Enter registration no."
-            density="compact"
-            variant="outlined"
-            hide-details="auto"
             :readonly="!selectedUser"
-            class="mb-3"
+            klass="mb-3"
           />
 
-          <div class="field-label">Panic Pin (optional)</div>
-          <v-text-field
-            v-model="form.cardNo"
-            aria-label="Panic Pin"
-            placeholder="Enter panic pin"
+          <v-checkbox
+            v-model="form.isAdministrator"
+            label="Administrator"
             density="compact"
-            variant="outlined"
-            hide-details="auto"
-            class="mb-3"
+            hide-details
+            class="admin-rule-checkbox"
           />
-
-          <div class="field-label">Panic Password (optional)</div>
-          <v-text-field
-            v-model="form.pinPassword"
-            aria-label="Panic Password"
-            placeholder="Enter password"
+          <p class="field-hint admin-rule-hint">
+            Allow this HID user to access the reader as an administrator.
+          </p>
+
+          <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
+            the design's. It goes in `AppField`'s `trailing` slot so the eye
+            sits INSIDE the 40px box as it did inside the Vuetify field, rather
+            than becoming a second control beside it.
+          -->
+          <AppField
+            v-model="form.accessPin"
+            aria-label="Access PIN"
+            placeholder="Enter numeric access PIN"
+            inputmode="numeric"
+            autocomplete="new-password"
+            :type="showPin ? 'text' : 'password'"
+          >
+            <template #trailing>
+              <button
+                type="button"
+                class="app-field__trailing"
+                :aria-label="showPin ? 'Hide access PIN' : 'Show access PIN'"
+                @click="showPin = !showPin"
+              >
+                <v-icon :icon="showPin ? 'mdi-eye-off' : 'mdi-eye'" size="18" />
+              </button>
+            </template>
+          </AppField>
+          <!-- `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." }}
+          </p>
+          <v-checkbox
+            v-if="selectedUser && pinEnrolled"
+            v-model="removePinRequested"
+            label="Remove current access PIN"
             density="compact"
-            variant="outlined"
-            hide-details="auto"
-            :type="showPassword ? 'text' : 'password'"
-            :append-inner-icon="showPassword ? 'mdi-eye-off' : 'mdi-eye'"
-            @click:append-inner="showPassword = !showPassword"
+            hide-details
           />
         </v-card-text>
 
+        <!-- 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 action-cancel" variant="flat" height="44" @click="formDialog = false">Cancel</v-btn>
-          <v-btn class="text-none action-submit" variant="flat" height="44" :loading="saving" @click="saveUser">
+          <v-btn
+            class="text-none action-cancel"
+            variant="flat"
+            height="44"
+            @click="formDialog = false"
+            >Cancel</v-btn
+          >
+          <v-btn
+            class="text-none action-submit"
+            variant="flat"
+            height="44"
+            :loading="saving"
+            @click="saveUser"
+          >
             Save
           </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 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><strong>{{ selectedUser ? formatHidUid(selectedUser.hidUserId) : "N/A" }}</strong>
-            <span>Registration No.</span><strong>{{ selectedUser?.registration || "N/A" }}</strong>
-            <span>Last access time</span><strong>{{ formatDate(selectedUser?.metadata?.lastAccessAt) }}</strong>
-            <span>Status</span><strong>{{ selectedUser ? getMappingStatus(selectedUser) : "N/A" }}</strong>
-            <span>Panic Pin</span><strong>{{ selectedUser?.cardNo || "N/A" }}</strong>
-            <span>Private Password</span><strong>{{ selectedUser?.metadata?.pinPassword ? "********" : "N/A" }}</strong>
+            <span>User ID</span
+            ><strong>{{
+              selectedUser ? formatHidUid(selectedUser.hidUserId) : "N/A"
+            }}</strong>
+            <span>Registration No.</span
+            ><strong>{{ selectedUser?.registration || "N/A" }}</strong>
+            <span>Last access time</span
+            ><strong>{{
+              formatDate(selectedUser?.metadata?.lastAccessAt)
+            }}</strong>
+            <span>Status</span
+            ><strong>{{
+              selectedUser ? getMappingStatus(selectedUser) : "N/A"
+            }}</strong>
+            <span>Administrator</span>
+            <strong class="admin-rule-detail">
+              <v-icon
+                :icon="selectedUser?.isAdministrator ? 'mdi-check-circle' : 'mdi-close-circle'"
+                :class="selectedUser?.isAdministrator
+                  ? 'admin-rule-indicator--enabled'
+                  : 'admin-rule-indicator--disabled'"
+                size="18"
+              />
+              {{ selectedUser?.isAdministrator ? "Yes" : "No" }}
+            </strong>
+            <span>Access PIN</span
+            ><strong>{{ selectedUser?.metadata?.pinEnrolled ? "Configured" : "N/A" }}</strong>
+          </div>
+        </v-card-text>
+        <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 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>
+          </p>
+
+          <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">
+              <v-icon icon="mdi-card-account-details-outline" size="22" />
+              <div class="hid-card-row__content">
+                <strong>{{ formatPhysicalCard(card) }}</strong>
+                <span>{{ getPhysicalCardSubtitle(card) }}</span>
+              </div>
+              <AppButton
+                variant="row"
+                icon="mdi-delete-outline"
+                :disabled="deletingCardId === String(card.id)"
+                @click="removePhysicalCard(card)"
+              />
+            </div>
+          </div>
+          <v-alert v-else type="info" variant="tonal" density="compact" class="mb-4">
+            No physical HID card is assigned to this user.
+          </v-alert>
+
+          <div class="field-label">Card data type</div>
+          <AppSelect
+            v-model="cardForm.cardType"
+            :items="physicalCardTypeOptions"
+            class="mb-3"
+          />
+          <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.
+          </p>
+          <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.
+          </p>
+
+          <div v-if="cardForm.cardType === 'pacs'" class="hid-card-fields">
+            <div>
+              <div class="field-label">Facility Code</div>
+              <AppField
+                v-model="cardForm.facilityCode"
+                inputmode="numeric"
+                placeholder="e.g. 123"
+              />
+            </div>
+            <div>
+              <div class="field-label">Card Number</div>
+              <AppField
+                v-model="cardForm.cardNumber"
+                inputmode="numeric"
+                placeholder="e.g. 45678"
+              />
+            </div>
+          </div>
+          <template v-else>
+            <div class="field-label">CSN / Raw Card Value</div>
+            <AppField
+              v-model="cardForm.cardValue"
+              inputmode="numeric"
+              placeholder="Enter the decimal card value"
+            />
+          </template>
+
+          <v-alert
+            v-if="enrollingCard"
+            type="info"
+            variant="tonal"
+            density="compact"
+            class="mt-4"
+          >
+            Present the physical card to the selected Amico reader. The request will time out after 30 seconds.
+          </v-alert>
+
+          <div class="hid-card-actions mt-4">
+            <AppButton
+              variant="secondary"
+              :disabled="savingCard || enrollingCard"
+              @click="assignPhysicalCard"
+            >
+              Assign Manually
+            </AppButton>
+            <AppButton
+              icon="mdi-contactless-payment"
+              :disabled="savingCard || enrollingCard"
+              @click="enrollPhysicalCard"
+            >
+              Read at Reader
+            </AppButton>
+            <AppButton
+              v-if="enrollingCard"
+              variant="ghost"
+              @click="cancelPhysicalCardEnrollment"
+            >
+              Cancel Reading
+            </AppButton>
           </div>
         </v-card-text>
         <v-card-actions>
           <v-spacer />
-          <v-btn class="text-none" variant="text" @click="viewDialog = false">Close</v-btn>
+          <AppButton variant="ghost" :disabled="enrollingCard" @click="cardDialog = false">
+            Close
+          </AppButton>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -238,12 +489,26 @@
         <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.
+            This action will remove the user from the HID reader and mark the
+            identity as deleted.
           </div>
         </v-card-text>
         <v-card-actions class="pa-0">
-          <v-btn class="text-none action-cancel" variant="flat" height="44" @click="deleteDialog = false">Cancel</v-btn>
-          <v-btn class="text-none action-submit" variant="flat" height="44" :loading="deleting" @click="deleteUser">Delete</v-btn>
+          <v-btn
+            class="text-none action-cancel"
+            variant="flat"
+            height="44"
+            @click="deleteDialog = false"
+            >Cancel</v-btn
+          >
+          <v-btn
+            class="text-none action-submit"
+            variant="flat"
+            height="44"
+            :loading="deleting"
+            @click="deleteUser"
+            >Delete</v-btn
+          >
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -260,9 +525,9 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  identityType: {
-    type: String,
-    default: "resident",
+  cardManagement: {
+    type: Boolean,
+    default: false,
   },
 });
 
@@ -270,6 +535,16 @@ const {
   getReaders,
   getIdentities,
   getUserImage,
+  setUserImage,
+  deleteUserImage,
+  getUserCards,
+  assignUserCard,
+  enrollUserCard,
+  cancelUserCardEnrollment,
+  deleteUserCard,
+  getUserPinStatus,
+  setUserPin,
+  deleteUserPin,
   runObjectOperation,
   createIdentity,
   updateIdentity,
@@ -279,9 +554,10 @@ const {
 const readers = ref<Record<string, any>[]>([]);
 const users = ref<Record<string, any>[]>([]);
 const userImages = ref<Record<string, string>>({});
+const administratorUserIds = ref<Set<number>>(new Set());
 const selectedReaderId = ref("");
 const search = ref("");
-const status = ref("Status");
+const status = ref("");
 const page = ref(1);
 const limit = ref(10);
 const pages = ref(1);
@@ -293,9 +569,23 @@ const deleting = ref(false);
 const formDialog = ref(false);
 const viewDialog = ref(false);
 const deleteDialog = ref(false);
+const cardDialog = ref(false);
 const selectedUser = ref<Record<string, any> | null>(null);
-const showPassword = ref(false);
+const cardUser = ref<Record<string, any> | null>(null);
+const physicalCards = ref<Record<string, any>[]>([]);
+const physicalCardsByUserId = ref<Record<string, Record<string, any>[]>>({});
+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);
+const removePinRequested = ref(false);
 const snackbar = reactive({
   show: false,
   color: "success",
@@ -310,18 +600,69 @@ const form = reactive({
   name: "",
   hidUserId: "",
   registration: "",
-  cardNo: "",
-  pinPassword: "",
+  isAdministrator: false,
+  accessPin: "",
   photoPreview: "",
 });
 
-const statusOptions = ["Status", "Mapped", "Unmapped"];
+const cardForm = reactive({
+  cardType: "pacs" as "pacs" | "csn",
+  facilityCode: "",
+  cardNumber: "",
+  cardValue: "",
+});
+
+const physicalCardTypeOptions = [
+  { title: "PACS (Facility Code + Card Number)", value: "pacs" },
+  { title: "CSN (Raw Card Serial Number)", value: "csn" },
+];
+
+const statusOptions = ["Mapped", "Unmapped"];
+
+/**
+ * `sortable: false` keeps the previous behaviour - the raw `v-table` never
+ * sorted - and no `weight` is set, so the table uses `TableMain`'s automatic
+ * layout. The handoff draws no HID table, so the screen's own fixed
+ * 24/20/12/20/16/8 % were a guess with no design number behind them.
+ */
+const userHeaders = [
+  { title: "Name", value: "name", sortable: false },
+  { title: "Facial Data", value: "facialData", sortable: false },
+  { title: "UID", value: "hidUserId", sortable: false },
+  { title: "Status", value: "status", sortable: false },
+  { title: "Admin", value: "isAdministrator", sortable: false },
+  { title: "", value: "action-table", sortable: false },
+];
+
+const cardHeaders = [
+  { title: "Name", value: "name", sortable: false },
+  { title: "UID", value: "hidUserId", sortable: false },
+  { title: "Physical HID Cards", value: "cards", sortable: false },
+  { title: "Admin", value: "isAdministrator", sortable: false },
+  { title: "", value: "action-table", sortable: false },
+];
+
+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 -
+ * the rows still come from `loadUsers`. This is the same pair of statements
+ * the old footer's two chevrons ran.
+ */
+function goToPage(next: number) {
+  page.value = next;
+  loadUsers();
+}
 
 const readerOptions = computed(() =>
   readers.value.map((reader) => ({
-    title: reader.name || reader.deviceId || reader._id,
+    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 pageRange = computed(() => {
@@ -335,7 +676,7 @@ const pageRange = computed(() => {
 watch(
   () => props.site,
   () => init(),
-  { immediate: true },
+  { immediate: true }
 );
 
 async function init() {
@@ -346,7 +687,8 @@ async function init() {
 async function loadReaders() {
   if (!props.site) return;
   const response = await getReaders({ site: props.site, page: 1, limit: 100 });
-  readers.value = response?.items ?? response?.data?.items ?? response?.data?.readers ?? [];
+  readers.value =
+    response?.items ?? response?.data?.items ?? response?.data?.readers ?? [];
   if (!selectedReaderId.value && readers.value.length) {
     selectedReaderId.value = readers.value[0]._id;
   }
@@ -355,16 +697,16 @@ async function loadReaders() {
 async function loadUsers() {
   if (!selectedReaderId.value) {
     users.value = [];
+    administratorUserIds.value = new Set();
+    physicalCardsByUserId.value = {};
     return;
   }
 
   loading.value = true;
   try {
     const identityQuery: Record<string, any> = {
-      page: page.value,
+      page: 1,
       limit: 500,
-      type: props.identityType,
-      search: search.value,
     };
 
     const [identityResponse, readerResponse, roleResponse] = await Promise.all([
@@ -375,17 +717,24 @@ async function loadUsers() {
         limit: 500,
         offset: 0,
       }),
-      isAdministratorIdentity() ? loadAdministratorRoles(selectedReaderId.value) : Promise.resolve(null),
+      loadAdministratorRoles(selectedReaderId.value),
     ]);
 
-    const identities = identityResponse?.items ?? identityResponse?.data?.items ?? identityResponse?.data?.identities ?? [];
-    const adminRoleIds = getAdministratorRoleUserIds(roleResponse);
-    const readerUsers = normalizeHidUsers(readerResponse).filter((user) => {
-      if (!isAdministratorIdentity()) return true;
-      const hidUserId = toHidNumericId(user.hidUserId);
-      return Boolean(hidUserId && adminRoleIds.has(hidUserId));
-    });
-    const mergedUsers = mergeReaderUsersWithIdentities(readerUsers, identities);
+    const identities =
+      identityResponse?.items ??
+      identityResponse?.data?.items ??
+      identityResponse?.data?.identities ??
+      [];
+    administratorUserIds.value = getAdministratorRoleUserIds(roleResponse);
+    const readerUsers = normalizeHidUsers(readerResponse).filter(
+      (user) => Number(user.userTypeId) !== 1,
+    );
+    const mergedUsers = mergeReaderUsersWithIdentities(readerUsers, identities).map(
+      (user) => ({
+        ...user,
+        isAdministrator: hasAdministratorRule(user),
+      }),
+    );
     const filteredUsers = filterUsers(mergedUsers);
     total.value = filteredUsers.length;
     pages.value = Math.max(1, Math.ceil(total.value / limit.value));
@@ -393,11 +742,17 @@ async function loadUsers() {
     const start = (page.value - 1) * limit.value;
     users.value = filteredUsers.slice(start, start + limit.value);
     serverPageRange.value = "";
-    await loadUserImages(users.value);
+    if (props.cardManagement) {
+      await loadVisibleUserCards(users.value);
+    } else {
+      await loadUserImages(users.value);
+    }
   } catch (error) {
     console.error("Unable to load HID reader users:", error);
     showToast("Unable to load HID users from reader.", "error");
     users.value = [];
+    administratorUserIds.value = new Set();
+    physicalCardsByUserId.value = {};
     total.value = 0;
     pages.value = 1;
     serverPageRange.value = "";
@@ -409,21 +764,23 @@ async function loadUsers() {
 async function loadUserImages(items: Record<string, any>[]) {
   if (!selectedReaderId.value) return;
 
-  await Promise.all(items.map(async (user) => {
-    const hidUserId = toHidNumericId(user.hidUserId);
-    const key = String(hidUserId || "");
-    if (!hidUserId || userImages.value[key] || user?.metadata?.photo) return;
-
-    try {
-      const response = await getUserImage(selectedReaderId.value, hidUserId);
-      const image = response?.data || response;
-      userImages.value[key] = image?.base64
-        ? `data:${image.contentType || "image/jpeg"};base64,${image.base64}`
-        : "";
-    } catch {
-      userImages.value[key] = "";
-    }
-  }));
+  await Promise.all(
+    items.map(async (user) => {
+      const hidUserId = toHidNumericId(user.hidUserId);
+      const key = String(hidUserId || "");
+      if (!hidUserId || userImages.value[key] || user?.metadata?.photo) return;
+
+      try {
+        const response = await getUserImage(selectedReaderId.value, hidUserId);
+        const image = response?.data || response;
+        userImages.value[key] = image?.base64
+          ? `data:${image.contentType || "image/jpeg"};base64,${image.base64}`
+          : "";
+      } catch {
+        userImages.value[key] = "";
+      }
+    })
+  );
 }
 
 function resetForm() {
@@ -434,9 +791,14 @@ function resetForm() {
   form.name = "";
   form.hidUserId = "";
   form.registration = "";
-  form.cardNo = "";
-  form.pinPassword = "";
+  form.isAdministrator = false;
+  form.accessPin = "";
+  pinEnrolled.value = false;
+  showPin.value = false;
+  removePinRequested.value = false;
   form.photoPreview = "";
+  selectedPhotoFile.value = null;
+  removePhotoRequested.value = false;
 }
 
 async function openEnroll() {
@@ -460,11 +822,25 @@ async function openEdit(user: Record<string, any>) {
   form.name = getName(user);
   form.hidUserId = formatHidUid(user.hidUserId);
   form.registration = user.registration ?? "";
-  form.cardNo = user.cardNo ?? "";
-  form.pinPassword = user.metadata?.pinPassword ?? "";
+  form.isAdministrator = hasAdministratorRule(user);
+  form.accessPin = "";
+  pinEnrolled.value = Boolean(user.metadata?.pinEnrolled);
+  removePinRequested.value = false;
   form.photoPreview = getUserImageSrc(user);
+  selectedPhotoFile.value = null;
+  removePhotoRequested.value = false;
   formDialog.value = true;
 
+  try {
+    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.
+  }
+
   if (!form.photoPreview) {
     await loadUserImages([user]);
     if (selectedUser.value?._rowKey === user._rowKey) {
@@ -487,9 +863,53 @@ function triggerPhotoInput() {
   photoInput.value?.click();
 }
 
+function triggerCameraInput() {
+  cameraDialog.value = true;
+}
+
+function onCameraCapture(dataUrl: string) {
+  const [header, encodedData] = dataUrl.split(",", 2);
+  if (!header || !encodedData) {
+    showToast("Unable to capture the facial image.", "error");
+    return;
+  }
+
+  const mimeType = header.match(/^data:([^;]+);base64$/)?.[1] || "image/jpeg";
+  const decodedData = atob(encodedData);
+  const bytes = new Uint8Array(decodedData.length);
+  for (let index = 0; index < decodedData.length; index += 1) {
+    bytes[index] = decodedData.charCodeAt(index);
+  }
+
+  selectedPhotoFile.value = new File([bytes], `hid-facial-${Date.now()}.jpg`, {
+    type: mimeType,
+  });
+  form.photoPreview = dataUrl;
+  removePhotoRequested.value = false;
+}
+
+function removePhoto() {
+  form.photoPreview = "";
+  selectedPhotoFile.value = null;
+  removePhotoRequested.value = true;
+}
+
 function onPhotoChange(event: Event) {
-  const file = (event.target as HTMLInputElement).files?.[0];
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0];
+  input.value = "";
   if (!file) return;
+  if (!["image/jpeg", "image/png"].includes(file.type)) {
+    showToast("Facial enrollment only accepts JPG or PNG images.", "error");
+    return;
+  }
+  if (file.size > 2 * 1024 * 1024) {
+    showToast("Facial enrollment images must be smaller than 2 MB.", "error");
+    return;
+  }
+
+  selectedPhotoFile.value = file;
+  removePhotoRequested.value = false;
   const reader = new FileReader();
   reader.onload = () => {
     form.photoPreview = String(reader.result || "");
@@ -498,11 +918,20 @@ function onPhotoChange(event: Event) {
 }
 
 async function saveUser() {
-  const readerId = selectedReaderId.value || form.reader || readers.value[0]?._id;
+  const readerId =
+    selectedReaderId.value || form.reader || readers.value[0]?._id;
   if (!readerId || !form.name || !form.hidUserId || !form.registration) {
     showToast("Please complete the required HID user fields.", "error");
     return;
   }
+  if (form.accessPin && !/^\d{1,32}$/.test(form.accessPin)) {
+    showToast("Access 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");
+    return;
+  }
 
   saving.value = true;
   try {
@@ -519,8 +948,13 @@ async function saveUser() {
     const payload = {
       hidUserId: String(hidUser.id),
       registration: form.registration,
-      cardNo: form.cardNo,
-      type: props.identityType as "resident" | "staff" | "contractor" | "visitor" | "admin" | "unknown",
+      type: (selectedUser.value?.type || "resident") as
+        | "resident"
+        | "staff"
+        | "contractor"
+        | "visitor"
+        | "admin"
+        | "unknown",
       status: "active" as const,
       metadata: {
         name: form.name,
@@ -530,13 +964,19 @@ async function saveUser() {
         unitLabel: buildUnitLabel(),
         facialData: form.photoPreview ? form.hidUserId : "",
         photo: form.photoPreview,
-        pinPassword: form.pinPassword,
+        imageTimestamp: selectedUser.value?.metadata?.imageTimestamp || "",
+        facialScores: selectedUser.value?.metadata?.facialScores || {},
+        pinEnrolled: pinEnrolled.value,
+        hidPhysicalCards: selectedUser.value?.metadata?.hidPhysicalCards || [],
       },
     };
 
     if (selectedUser.value) {
       await updateHidUserOnReader(readerId, hidUser);
-      await syncHidUserRole(readerId, hidUser.id, isAdministratorIdentity());
+      await syncHidUserRole(readerId, hidUser.id, form.isAdministrator);
+      const facialResult = await syncFacialImage(readerId, hidUser.id);
+      applyFacialResult(payload.metadata, facialResult);
+      payload.metadata.pinEnrolled = await syncAccessPin(readerId, hidUser.id);
       if (selectedUser.value._id) {
         await updateIdentity(selectedUser.value._id, payload);
       } else {
@@ -544,14 +984,21 @@ async function saveUser() {
       }
     } else {
       await createHidUserOnReader(readerId, hidUser);
-      await syncHidUserRole(readerId, hidUser.id, isAdministratorIdentity());
+      await syncHidUserRole(readerId, hidUser.id, form.isAdministrator);
+      const facialResult = await syncFacialImage(readerId, hidUser.id);
+      applyFacialResult(payload.metadata, facialResult);
+      payload.metadata.pinEnrolled = await syncAccessPin(readerId, hidUser.id);
       await saveIdentityOnReader(readerId, payload);
       selectedReaderId.value = readerId;
     }
 
     formDialog.value = false;
     await loadUsers();
-    showToast(selectedUser.value?._id ? "HID user updated on reader." : "HID user enrolled on reader.");
+    showToast(
+      selectedUser.value?._id
+        ? "HID user updated on reader."
+        : "HID user enrolled on reader."
+    );
   } catch (error: any) {
     console.error("Unable to save HID user:", error);
     showToast(getHidErrorMessage(error), "error");
@@ -560,12 +1007,86 @@ async function saveUser() {
   }
 }
 
+async function syncAccessPin(readerId: string, hidUserId: number) {
+  if (removePinRequested.value) {
+    await deleteUserPin(readerId, hidUserId);
+    pinEnrolled.value = false;
+    return false;
+  }
+  if (form.accessPin) {
+    await setUserPin(readerId, hidUserId, form.accessPin);
+    form.accessPin = "";
+    pinEnrolled.value = true;
+    return true;
+  }
+  return pinEnrolled.value;
+}
+
+type FacialSyncResult = {
+  action: "none" | "enrolled" | "removed";
+  timestamp?: number;
+  scores?: Record<string, unknown>;
+};
+
+async function syncFacialImage(
+  readerId: string,
+  hidUserId: number
+): Promise<FacialSyncResult> {
+  if (selectedPhotoFile.value) {
+    const timestamp = Math.floor(Date.now() / 1000);
+    const response = await setUserImage(
+      readerId,
+      hidUserId,
+      selectedPhotoFile.value,
+      {
+        timestamp,
+        match: true,
+      }
+    );
+    const result = response?.data;
+    userImages.value[String(hidUserId)] = form.photoPreview;
+    return { action: "enrolled", timestamp, scores: result?.scores };
+  }
+
+  if (removePhotoRequested.value) {
+    await deleteUserImage(readerId, hidUserId);
+    delete userImages.value[String(hidUserId)];
+    return { action: "removed" };
+  }
+
+  return { action: "none" };
+}
+
+function applyFacialResult(
+  metadata: Record<string, unknown>,
+  result: FacialSyncResult
+) {
+  if (result.action === "enrolled") {
+    metadata.facialData = form.hidUserId;
+    metadata.imageTimestamp = String(result.timestamp || "");
+    metadata.facialScores = result.scores || {};
+  } else if (result.action === "removed") {
+    metadata.facialData = "";
+    metadata.photo = "";
+    metadata.imageTimestamp = "";
+    metadata.facialScores = {};
+  }
+}
+
 async function deleteUser() {
   if (!selectedUser.value) return;
 
   deleting.value = true;
   try {
-    await syncHidUserRole(selectedReaderId.value, toHidNumericId(selectedUser.value.hidUserId), false);
+    await syncHidUserRole(
+      selectedReaderId.value,
+      toHidNumericId(selectedUser.value.hidUserId),
+      false
+    );
+    await deleteUserPin(
+      selectedReaderId.value,
+      toHidNumericId(selectedUser.value.hidUserId),
+    );
     await deleteHidUserFromReader(selectedReaderId.value, selectedUser.value);
     if (selectedUser.value._id) {
       await deleteIdentity(selectedUser.value._id);
@@ -581,8 +1102,14 @@ async function deleteUser() {
   }
 }
 
-async function saveIdentityOnReader(readerId: string, payload: Record<string, any>) {
-  const existingIdentity = await findExistingIdentityOnReader(readerId, payload);
+async function saveIdentityOnReader(
+  readerId: string,
+  payload: Record<string, any>
+) {
+  const existingIdentity = await findExistingIdentityOnReader(
+    readerId,
+    payload
+  );
   if (existingIdentity?._id) {
     await updateIdentity(existingIdentity._id, payload);
     return;
@@ -594,31 +1121,47 @@ async function saveIdentityOnReader(readerId: string, payload: Record<string, an
     const message = getHidErrorMessage(error);
     if (!message.toLowerCase().includes("already exists")) throw error;
 
-    const duplicatedIdentity = await findExistingIdentityOnReader(readerId, payload);
+    const duplicatedIdentity = await findExistingIdentityOnReader(
+      readerId,
+      payload
+    );
     if (!duplicatedIdentity?._id) throw error;
     await updateIdentity(duplicatedIdentity._id, payload);
   }
 }
 
-async function findExistingIdentityOnReader(readerId: string, payload: Record<string, any>) {
+async function findExistingIdentityOnReader(
+  readerId: string,
+  payload: Record<string, any>
+) {
   const response = await getIdentities(readerId, {
     page: 1,
     limit: 500,
     search: payload.hidUserId || payload.registration || payload.cardNo || "",
   });
-  const identities = response?.items ?? response?.data?.items ?? response?.data?.identities ?? [];
+  const identities =
+    response?.items ??
+    response?.data?.items ??
+    response?.data?.identities ??
+    [];
   const hidUserId = String(payload.hidUserId || "");
   const registration = String(payload.registration || "");
   const cardNo = String(payload.cardNo || "");
 
-  return identities.find((identity: Record<string, any>) =>
-    String(identity.hidUserId || "") === hidUserId ||
-    Boolean(registration && String(identity.registration || "") === registration) ||
-    Boolean(cardNo && String(identity.cardNo || "") === cardNo),
+  return identities.find(
+    (identity: Record<string, any>) =>
+      String(identity.hidUserId || "") === hidUserId ||
+      Boolean(
+        registration && String(identity.registration || "") === registration
+      ) ||
+      Boolean(cardNo && String(identity.cardNo || "") === cardNo)
   );
 }
 
-async function createHidUserOnReader(readerId: string, user: Record<string, any>) {
+async function createHidUserOnReader(
+  readerId: string,
+  user: Record<string, any>
+) {
   const existing = await getHidUserFromReader(readerId, user.id);
   if (existing) {
     await updateHidUserOnReader(readerId, user);
@@ -648,7 +1191,10 @@ async function getHidUserFromReader(readerId: string, id: unknown) {
   return normalizeHidUsers(response)[0];
 }
 
-async function updateHidUserOnReader(readerId: string, user: Record<string, any>) {
+async function updateHidUserOnReader(
+  readerId: string,
+  user: Record<string, any>
+) {
   const { id, ...values } = user;
   await runObjectOperation(readerId, {
     operation: "modify",
@@ -662,7 +1208,10 @@ async function updateHidUserOnReader(readerId: string, user: Record<string, any>
   });
 }
 
-async function deleteHidUserFromReader(readerId: string, user: Record<string, any>) {
+async function deleteHidUserFromReader(
+  readerId: string,
+  user: Record<string, any>
+) {
   const id = toHidNumericId(user.hidUserId);
   if (!readerId || !id) return;
 
@@ -677,7 +1226,11 @@ async function deleteHidUserFromReader(readerId: string, user: Record<string, an
   });
 }
 
-async function syncHidUserRole(readerId: string, hidUserId: unknown, isAdministrator: boolean) {
+async function syncHidUserRole(
+  readerId: string,
+  hidUserId: unknown,
+  isAdministrator: boolean
+) {
   const userId = toHidNumericId(hidUserId);
   if (!readerId || !userId) return;
 
@@ -771,14 +1324,17 @@ function getAdministratorRoleUserIds(response: Record<string, any> | null) {
   return new Set(
     (Array.isArray(roles) ? roles : [])
       .map((role) => toHidNumericId(role.user_id))
-      .filter((userId): userId is number => Boolean(userId)),
+      .filter((userId): userId is number => Boolean(userId))
   );
 }
 
 function toHidUserObject(identity: Record<string, any>) {
   return {
     id: toHidNumericId(identity.hidUserId),
-    name: identity.metadata?.name || identity.name || `User ${identity.hidUserId || ""}`.trim(),
+    name:
+      identity.metadata?.name ||
+      identity.name ||
+      `User ${identity.hidUserId || ""}`.trim(),
     registration: identity.registration || "",
   };
 }
@@ -793,8 +1349,182 @@ function toHidNumericId(value: unknown) {
   return Number.isInteger(parsed) && parsed > 0 ? parsed : undefined;
 }
 
-function isAdministratorIdentity() {
-  return props.identityType === "admin";
+function hasAdministratorRule(user?: Record<string, any> | null) {
+  const hidUserId = toHidNumericId(user?.hidUserId);
+  return Boolean(hidUserId && administratorUserIds.value.has(hidUserId));
+}
+
+async function loadVisibleUserCards(items: Record<string, any>[]) {
+  if (!selectedReaderId.value) return;
+
+  const entries = await Promise.all(
+    items.map(async (user) => {
+      const hidUserId = toHidNumericId(user.hidUserId);
+      if (!hidUserId) return ["", []] as const;
+
+      try {
+        const response = await getUserCards(selectedReaderId.value, hidUserId);
+        return [String(hidUserId), response?.data?.cards || []] as const;
+      } catch {
+        return [String(hidUserId), []] as const;
+      }
+    }),
+  );
+
+  physicalCardsByUserId.value = Object.fromEntries(
+    entries.filter(([hidUserId]) => Boolean(hidUserId)),
+  );
+}
+
+function getUserPhysicalCards(user: Record<string, any>) {
+  const hidUserId = toHidNumericId(user.hidUserId);
+  return hidUserId ? physicalCardsByUserId.value[String(hidUserId)] || [] : [];
+}
+
+async function openCardManager(user: Record<string, any>) {
+  cardUser.value = user;
+  cardForm.cardType = "pacs";
+  cardForm.facilityCode = "";
+  cardForm.cardNumber = "";
+  cardForm.cardValue = "";
+  physicalCards.value = [];
+  cardDialog.value = true;
+  await loadPhysicalCards();
+}
+
+function getCardReaderAndUser() {
+  const readerId = String(cardUser.value?.reader || selectedReaderId.value || "");
+  const hidUserId = toHidNumericId(cardUser.value?.hidUserId);
+  return { readerId, hidUserId };
+}
+
+async function loadPhysicalCards() {
+  const { readerId, hidUserId } = getCardReaderAndUser();
+  if (!readerId || !hidUserId) return;
+
+  loadingCards.value = true;
+  try {
+    const response = await getUserCards(readerId, hidUserId);
+    physicalCards.value = response?.data?.cards || [];
+  } catch (error: unknown) {
+    physicalCards.value = [];
+    showToast(getHidErrorMessage(error), "error");
+  } finally {
+    loadingCards.value = false;
+  }
+}
+
+function parsePhysicalCardInteger(value: string, label: string) {
+  if (!/^\d+$/.test(value.trim())) {
+    showToast(`${label} must contain numbers only.`, "error");
+    return null;
+  }
+  const number = Number(value);
+  if (!Number.isSafeInteger(number) || number < 0) {
+    showToast(`${label} is outside the supported range.`, "error");
+    return null;
+  }
+  return number;
+}
+
+async function assignPhysicalCard() {
+  const { readerId, hidUserId } = getCardReaderAndUser();
+  if (!readerId || !hidUserId) return;
+
+  let payload:
+    | { cardType: "pacs"; facilityCode: number; cardNumber: number }
+    | { cardType: "csn"; cardValue: string };
+  if (cardForm.cardType === "pacs") {
+    const facilityCode = parsePhysicalCardInteger(cardForm.facilityCode, "Facility Code");
+    const cardNumber = parsePhysicalCardInteger(cardForm.cardNumber, "Card Number");
+    if (facilityCode === null || cardNumber === null) return;
+    payload = { cardType: "pacs", facilityCode, cardNumber };
+  } else {
+    const cardValue = parsePhysicalCardInteger(cardForm.cardValue, "CSN");
+    if (cardValue === null || cardValue <= 0) {
+      if (cardValue === 0) showToast("CSN must be greater than zero.", "error");
+      return;
+    }
+    payload = { cardType: "csn", cardValue: String(cardValue) };
+  }
+
+  savingCard.value = true;
+  try {
+    await assignUserCard(readerId, hidUserId, payload);
+    cardForm.facilityCode = "";
+    cardForm.cardNumber = "";
+    cardForm.cardValue = "";
+    await loadPhysicalCards();
+    await loadUsers();
+    showToast("Physical HID card assigned and verified on the reader.");
+  } catch (error: unknown) {
+    showToast(getHidErrorMessage(error), "error");
+  } finally {
+    savingCard.value = false;
+  }
+}
+
+async function enrollPhysicalCard() {
+  const { readerId, hidUserId } = getCardReaderAndUser();
+  if (!readerId || !hidUserId) return;
+
+  enrollingCard.value = true;
+  cardEnrollmentCancelled.value = false;
+  try {
+    await enrollUserCard(readerId, hidUserId, cardForm.cardType, 30);
+    await loadPhysicalCards();
+    await loadUsers();
+    showToast("Physical HID card read and enrolled on the reader.");
+  } catch (error: unknown) {
+    if (!cardEnrollmentCancelled.value) {
+      showToast(getHidErrorMessage(error), "error");
+    }
+  } finally {
+    enrollingCard.value = false;
+  }
+}
+
+async function cancelPhysicalCardEnrollment() {
+  const { readerId } = getCardReaderAndUser();
+  if (!readerId) return;
+  cardEnrollmentCancelled.value = true;
+  try {
+    await cancelUserCardEnrollment(readerId);
+    showToast("Physical HID card reading cancelled.");
+  } catch (error: unknown) {
+    showToast(getHidErrorMessage(error), "error");
+  }
+}
+
+async function removePhysicalCard(card: Record<string, any>) {
+  if (!window.confirm(`Remove physical HID card ${formatPhysicalCard(card)}?`)) return;
+  const { readerId, hidUserId } = getCardReaderAndUser();
+  if (!readerId || !hidUserId || !card?.id) return;
+
+  deletingCardId.value = String(card.id);
+  try {
+    await deleteUserCard(readerId, hidUserId, card.id);
+    await loadPhysicalCards();
+    await loadUsers();
+    showToast("Physical HID card removed from the reader.");
+  } catch (error: unknown) {
+    showToast(getHidErrorMessage(error), "error");
+  } finally {
+    deletingCardId.value = "";
+  }
+}
+
+function formatPhysicalCard(card: Record<string, any>) {
+  if (card?.cardType === "pacs") {
+    return `PACS ${card.facilityCode}.${card.cardNumber}`;
+  }
+  if (card?.cardType === "csn") return `CSN ${card.value}`;
+  return `Card ${card?.value || "N/A"}`;
+}
+
+function getPhysicalCardSubtitle(card: Record<string, any>) {
+  const source = card?.source === "reader" ? "Read at reader" : card?.source === "manual" ? "Manual" : "On device";
+  return `${source} - Raw value ${card?.value || "N/A"}`;
 }
 
 function buildUnitLabel() {
@@ -807,23 +1537,40 @@ function getName(user?: Record<string, any> | null) {
 }
 
 function getUnit(user?: Record<string, any> | null) {
-  return user?.metadata?.unitLabel || [user?.metadata?.block, user?.metadata?.level, user?.metadata?.unit].filter(Boolean).join("/") || "N/A";
+  return (
+    user?.metadata?.unitLabel ||
+    [user?.metadata?.block, user?.metadata?.level, user?.metadata?.unit]
+      .filter(Boolean)
+      .join("/") ||
+    "N/A"
+  );
 }
 
 function getFacialData(user: Record<string, any>) {
-  return user?.metadata?.facialData || user?.metadata?.imageTimestamp || (user?.metadata?.photo ? user.hidUserId : "N/A");
+  return (
+    user?.metadata?.facialData ||
+    user?.metadata?.imageTimestamp ||
+    (user?.metadata?.photo ? user.hidUserId : "N/A")
+  );
 }
 
 function getUserImageSrc(user: Record<string, any>) {
   const hidUserId = toHidNumericId(user?.hidUserId);
-  return user?.metadata?.photo || (hidUserId ? userImages.value[String(hidUserId)] : "") || "";
+  return (
+    user?.metadata?.photo ||
+    (hidUserId ? userImages.value[String(hidUserId)] : "") ||
+    ""
+  );
 }
 
 async function getNextUid() {
   const readerIds = await getExistingHidReaderIds();
   const maxNumber = users.value.reduce((max, user) => {
     const match = String(user.hidUserId ?? "").match(/^UID(\d+)$/i);
-    return Math.max(max, match ? Number(match[1]) : toHidNumericId(user.hidUserId) || 0);
+    return Math.max(
+      max,
+      match ? Number(match[1]) : toHidNumericId(user.hidUserId) || 0
+    );
   }, 0);
   const nextNumber = Math.max(maxNumber, ...readerIds, 0) + 1;
   return `UID${String(nextNumber).padStart(6, "0")}`;
@@ -837,10 +1584,15 @@ async function getNextRegistration() {
   const numericRegistrations = registrations
     .map((registration) => {
       const match = registration.match(/^(\d+)$/);
-      return match ? { value: Number(match[1]), width: match[1].length } : undefined;
+      return match
+        ? { value: Number(match[1]), width: match[1].length }
+        : undefined;
     })
     .filter((item): item is { value: number; width: number } => Boolean(item));
-  const maxRegistration = numericRegistrations.reduce((max, item) => Math.max(max, item.value), 0);
+  const maxRegistration = numericRegistrations.reduce(
+    (max, item) => Math.max(max, item.value),
+    0
+  );
   const width = Math.max(6, ...numericRegistrations.map((item) => item.width));
 
   return String(maxRegistration + 1).padStart(width, "0");
@@ -882,11 +1634,14 @@ function normalizeHidUsers(response: Record<string, any>) {
         hidUserId: String(user.id || ""),
         rawHidUserId: user.id,
         registration: user.registration,
+        userTypeId: user.user_type_id,
         cardNo: user.card_value || user.cardNo || "",
         name: user.name,
         metadata: {
           name: user.name,
-          imageTimestamp: user.image_timestamp ? String(user.image_timestamp) : "",
+          imageTimestamp: user.image_timestamp
+            ? String(user.image_timestamp)
+            : "",
           lastAccessAt: fromUnixSeconds(user.last_access),
           hidReaderSource: true,
         },
@@ -894,7 +1649,10 @@ function normalizeHidUsers(response: Record<string, any>) {
     : [];
 }
 
-function mergeReaderUsersWithIdentities(readerUsers: Record<string, any>[], identities: Record<string, any>[]) {
+function mergeReaderUsersWithIdentities(
+  readerUsers: Record<string, any>[],
+  identities: Record<string, any>[]
+) {
   const identityById = new Map<string, Record<string, any>>();
   identities.forEach((identity) => {
     const id = toHidNumericId(identity.hidUserId);
@@ -902,7 +1660,9 @@ function mergeReaderUsersWithIdentities(readerUsers: Record<string, any>[], iden
   });
 
   const merged = readerUsers.map((readerUser) => {
-    const identity = identityById.get(String(toHidNumericId(readerUser.hidUserId)));
+    const identity = identityById.get(
+      String(toHidNumericId(readerUser.hidUserId))
+    );
     if (!identity) return readerUser;
 
     return {
@@ -917,8 +1677,11 @@ function mergeReaderUsersWithIdentities(readerUsers: Record<string, any>[], iden
       metadata: {
         ...readerUser.metadata,
         ...identity.metadata,
-        imageTimestamp: identity.metadata?.imageTimestamp || readerUser.metadata?.imageTimestamp,
-        lastAccessAt: identity.metadata?.lastAccessAt || readerUser.metadata?.lastAccessAt,
+        imageTimestamp:
+          identity.metadata?.imageTimestamp ||
+          readerUser.metadata?.imageTimestamp,
+        lastAccessAt:
+          identity.metadata?.lastAccessAt || readerUser.metadata?.lastAccessAt,
       },
     };
   });
@@ -929,13 +1692,15 @@ function mergeReaderUsersWithIdentities(readerUsers: Record<string, any>[], iden
 function filterUsers(items: Record<string, any>[]) {
   const searchText = search.value.trim().toLowerCase();
   return items.filter((item) => {
-    const matchesSearch = !searchText || [
-      getName(item),
-      item.hidUserId,
-      item.registration,
-      item.cardNo,
-    ].some((value) => String(value || "").toLowerCase().includes(searchText));
-    const matchesStatus = status.value === "Status" || getMappingStatus(item) === status.value;
+    const matchesSearch =
+      !searchText ||
+      [getName(item), item.hidUserId, item.registration, item.cardNo].some(
+        (value) =>
+          String(value || "")
+            .toLowerCase()
+            .includes(searchText)
+      );
+    const matchesStatus = !status.value || getMappingStatus(item) === status.value;
     return matchesSearch && matchesStatus;
   });
 }
@@ -949,10 +1714,6 @@ function getMappingStatus(user: Record<string, any>) {
   return hasMappedRecord(user) ? "Mapped" : "Unmapped";
 }
 
-function getMappingStatusClass(user: Record<string, any>) {
-  return hasMappedRecord(user) ? "status-success" : "status-warning";
-}
-
 function hasMappedRecord(user: Record<string, any>) {
   return Boolean(user?.person || user?.user || user?.member || user?.visitor);
 }
@@ -995,209 +1756,230 @@ function getHidErrorMessage(error: any) {
       data?.statusMessage ||
       error?.statusMessage ||
       error?.message ||
-      "Unable to save HID user.",
+      "Unable to save HID user."
   );
 }
 </script>
 
 <style scoped>
+/*
+  WHAT IS LEFT AFTER THE CARD AND TABLE MOVED TO `TableMain`.
+
+  The toolbar, the card, the six fixed column widths, the refresh strip, the
+  footer pager, the empty state and the three `status-*` chip palettes are all
+  gone - they were a private copy of the shared table drawn in literal hexes.
+  What remains is the three dialogs, and every colour in them is now a token,
+  so the dark theme reaches them for the first time.
+*/
 .hid-user-enrollment {
   padding: 24px 0;
   width: 100%;
   min-width: 0;
 }
 
-.toolbar {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  align-items: center;
-  margin-bottom: 16px;
-}
-
-.toolbar-spacer {
-  flex: 1;
-}
-
-.enroll-button {
-  min-width: 170px;
-  background: #e4e4e4;
-  color: #0a2638;
+.hid-user-filters {
+  /* The filter row sits INSIDE the card's extension, so it needs the card's
+     own side padding rather than the row's default bottom margin. */
+  margin: 0;
+  padding: 10px 14px;
 }
 
-.reader-input,
-.search-input {
+.hid-user-filters :deep(.app-field) {
   max-width: 240px;
 }
 
-.status-input {
-  max-width: 160px;
+/* The reader option now reads "Reader - Portal", so it needs more room than
+   the other filters. `AppSelect`'s root class IS `app-field`, so this has to
+   be more specific than the rule above rather than a `.app-select` one. */
+.hid-user-filters :deep(.app-field.reader-select) {
+  max-width: 320px;
 }
 
-.table-card {
-  display: flex;
-  flex-direction: column;
-  min-height: 430px;
-  overflow: hidden;
+.small-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text);
 }
 
-.table-card :deep(table) {
-  table-layout: fixed;
-  width: 100%;
-  min-width: 820px;
+/* Was `#4f5a66` / `#e53935` - the same two greys on both themes. */
+.field-label {
+  color: var(--text2);
+  font-size: 12px;
+  font-weight: 600;
+  margin-bottom: 6px;
 }
 
-.table-card :deep(th),
-.table-card :deep(td) {
-  white-space: nowrap;
+.field-label span {
+  color: var(--err);
 }
 
-.table-card :deep(th:nth-child(1)),
-.table-card :deep(td:nth-child(1)) {
-  width: 24%;
+/* Vuetify's `persistent-hint` line, redrawn as the design's explanatory line. */
+.field-hint {
+  margin: 6px 0 0;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.45;
 }
 
-.table-card :deep(th:nth-child(2)),
-.table-card :deep(td:nth-child(2)) {
-  width: 20%;
+.photo-wrap {
+  display: grid;
+  place-items: center;
+  margin-bottom: 14px;
 }
 
-.table-card :deep(th:nth-child(3)),
-.table-card :deep(td:nth-child(3)) {
-  width: 12%;
+.photo-button {
+  width: 120px;
+  height: 120px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  background: var(--card);
+  display: grid;
+  place-items: center;
+  color: var(--muted);
+  font-size: 12px;
+  overflow: hidden;
+  position: relative;
 }
 
-.table-card :deep(th:nth-child(4)),
-.table-card :deep(td:nth-child(4)) {
-  width: 20%;
+.photo-preview {
+  width: 100%;
+  height: 100%;
 }
 
-.table-card :deep(th:nth-child(5)),
-.table-card :deep(td:nth-child(5)) {
-  width: 16%;
+.photo-edit-icon {
+  position: absolute;
+  right: 8px;
+  bottom: 8px;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--card);
+  color: var(--text);
+  display: grid;
+  place-items: center;
+  box-shadow: var(--shadow-menu);
 }
 
-.table-card :deep(th:nth-child(6)),
-.table-card :deep(td:nth-child(6)) {
-  width: 8%;
+.hid-face-avatar {
+  border: 1px solid var(--border);
+  background: var(--hover);
 }
 
-.table-body {
-  flex: 1;
-  overflow-x: auto;
+.admin-rule-indicator {
+  display: inline-flex;
+  vertical-align: middle;
 }
 
-.table-refresh,
-.table-footer {
+.hid-card-user {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 8px 10px;
-  border-bottom: 1px solid #eeeeee;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 0 0 14px;
+  color: var(--text);
+  font-weight: 700;
 }
 
-.table-footer {
-  justify-content: flex-end;
-  border-top: 1px solid #eeeeee;
-  border-bottom: 0;
-  background: #f6f6f6;
-  min-height: 44px;
-  padding: 4px 10px;
+.hid-card-user span,
+.hid-card-row__content span {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 600;
 }
 
-.page-count {
-  margin-left: auto;
-  color: #475467;
+.hid-card-cell {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.hid-card-cell__item {
+  padding: 4px 9px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--primary) 10%, transparent);
+  color: var(--primary);
   font-size: 12px;
+  font-weight: 700;
 }
 
-.empty-state {
-  min-height: 280px;
-  display: grid;
-  place-items: center;
-  color: #687382;
-  font-size: 13px;
+.hid-card-list {
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
 }
 
-.status-chip {
-  min-width: 86px;
-  justify-content: center;
-  font-weight: 600;
+.hid-card-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 58px;
+  padding: 8px 10px 8px 14px;
+  color: var(--text2);
 }
 
-.status-success {
-  background: #dff7e7 !important;
-  color: #1b7f3a !important;
+.hid-card-row + .hid-card-row {
+  border-top: 1px solid var(--border);
 }
 
-.status-warning {
-  background: #fff0cc !important;
-  color: #9a6700 !important;
+.hid-card-row__content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
 }
 
-.status-error {
-  background: #fde2e1 !important;
-  color: #b42318 !important;
+.hid-card-row__content strong {
+  color: var(--text);
+  font-size: 13px;
 }
 
-.small-title {
-  font-size: 14px;
-  font-weight: 700;
+.hid-card-fields {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
 }
 
-.field-label {
-  color: #4f5a66;
-  font-size: 12px;
-  font-weight: 600;
+.hid-card-type-hint {
   margin-bottom: 6px;
 }
 
-.field-label span {
-  color: #e53935;
+.hid-card-access-hint {
+  margin-bottom: 14px;
 }
 
-.photo-wrap {
-  display: grid;
-  place-items: center;
-  margin-bottom: 14px;
+.hid-card-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
 }
 
-.photo-button {
-  width: 120px;
-  height: 120px;
-  border: 1px solid #d8dde4;
-  border-radius: 8px;
-  background: #ffffff;
-  display: grid;
-  place-items: center;
-  color: #98a2b3;
-  font-size: 12px;
-  overflow: hidden;
-  position: relative;
+@media (max-width: 520px) {
+  .hid-card-fields {
+    grid-template-columns: 1fr;
+  }
 }
 
-.photo-preview {
-  width: 100%;
-  height: 100%;
+.admin-rule-indicator--enabled {
+  color: var(--ok);
 }
 
-.photo-edit-icon {
-  position: absolute;
-  right: 8px;
-  bottom: 8px;
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  background: #ffffff;
-  color: #00324a;
-  display: grid;
-  place-items: center;
-  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
+.admin-rule-indicator--disabled {
+  color: var(--err);
 }
 
-.hid-face-avatar {
-  border: 1px solid #d8dde4;
-  background: #f2f4f7;
+.admin-rule-checkbox {
+  margin-top: -4px;
+}
+
+.admin-rule-hint {
+  margin: -2px 0 14px;
+}
+
+.admin-rule-detail {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
 }
 
 .hidden-input {
@@ -1209,43 +1991,38 @@ function getHidErrorMessage(error: any) {
   grid-template-columns: 1fr 1fr;
   gap: 8px 16px;
   font-size: 13px;
+  color: var(--text);
 }
 
 .detail-grid span {
-  color: #667085;
+  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: #062d42;
-  color: #ffffff;
+  background: var(--accent-strong);
+  color: var(--on-accent-strong);
 }
 
 @media (max-width: 960px) {
-  .toolbar {
-    align-items: stretch;
-  }
-
-  .toolbar-spacer {
-    display: none;
-  }
-
-  .enroll-button,
-  .reader-input,
-  .search-input,
-  .status-input {
+  .hid-user-filters :deep(.app-field),
+  .hid-user-filters :deep(.app-select) {
     max-width: none;
     width: 100%;
   }
-
-  .table-card {
-    min-height: 360px;
-  }
 }
 
 @media (max-width: 600px) {
@@ -1262,10 +2039,6 @@ function getHidErrorMessage(error: any) {
     height: 104px;
   }
 
-  .table-footer {
-    justify-content: center;
-  }
-
   :global(.v-dialog > .v-overlay__content) {
     max-width: calc(100vw - 24px) !important;
     margin: 12px !important;