@7365admin1/layer-common 3.2.2-staging.120 → 3.2.2-staging.122

package/components/HidUserEnrollment.vue

@@ -1,53 +1,28 @@
+<!--
+  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"
-        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>
-
+    <!-- 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'"
@@ -60,112 +35,106 @@
       {{ selectedReader.portalName || "Not configured" }}
     </v-alert>
 
-    <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.
+    <TableMain
+      title="HID Users"
+      :headers="userHeaders"
+      :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 #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-model="status"
+            :items="statusOptions"
+            @update:model-value="loadUsers"
+          />
+        </div>
+      </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.action-table`]="{ item }">
+        <v-menu>
+          <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="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="mdi-account-off-outline" size="32" />
+          <span>No HID users enrolled yet.</span>
         </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>
+    </TableMain>
 
     <v-dialog v-model="formDialog" max-width="420" persistent>
       <v-card rounded="lg">
@@ -188,7 +157,9 @@
                     <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>
@@ -217,55 +188,57 @@
           </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">Access PIN (optional)</div>
-          <v-text-field
+          <!--
+            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"
-            density="compact"
-            variant="outlined"
             inputmode="numeric"
             autocomplete="new-password"
             :type="showPin ? 'text' : 'password'"
-            :append-inner-icon="showPin ? 'mdi-eye-off' : 'mdi-eye'"
-            :hint="selectedUser && pinEnrolled ? 'Leave blank to keep the current PIN.' : 'PIN works as an alternative to face or QR.'"
-            persistent-hint
-            @click:append-inner="showPin = !showPin"
-            class="mb-3"
-          />
+          >
+            <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"
@@ -275,6 +248,9 @@
           />
         </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"
@@ -324,9 +300,7 @@
         </v-card-text>
         <v-card-actions>
           <v-spacer />
-          <v-btn class="text-none" variant="text" @click="viewDialog = false"
-            >Close</v-btn
-          >
+          <AppButton variant="ghost" @click="viewDialog = false">Close</AppButton>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -439,6 +413,30 @@ const form = reactive({
 
 const statusOptions = ["Status", "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: "", value: "action-table", sortable: false },
+];
+
+/**
+ * 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} — ${reader.portalName || "Portal not configured"}`,
@@ -1316,10 +1314,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);
 }
@@ -1368,154 +1362,64 @@ function getHidErrorMessage(error: any) {
 </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;
+.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;
 }
 
-.toolbar-spacer {
-  flex: 1;
-}
-
-.enroll-button {
-  min-width: 170px;
-  background: #e4e4e4;
-  color: #0a2638;
-}
-
-.reader-input,
-.search-input {
+.hid-user-filters :deep(.app-field) {
   max-width: 240px;
 }
 
-.status-input {
-  max-width: 160px;
-}
-
-.table-card {
-  display: flex;
-  flex-direction: column;
-  min-height: 430px;
-  overflow: hidden;
-}
-
-.table-card :deep(table) {
-  table-layout: fixed;
-  width: 100%;
-  min-width: 820px;
-}
-
-.table-card :deep(th),
-.table-card :deep(td) {
-  white-space: nowrap;
-}
-
-.table-card :deep(th:nth-child(1)),
-.table-card :deep(td:nth-child(1)) {
-  width: 28%;
-}
-
-.table-card :deep(th:nth-child(2)),
-.table-card :deep(td:nth-child(2)) {
-  width: 22%;
-}
-
-.table-card :deep(th:nth-child(3)),
-.table-card :deep(td:nth-child(3)) {
-  width: 25%;
-}
-
-.table-card :deep(th:nth-child(4)),
-.table-card :deep(td:nth-child(4)) {
-  width: 17%;
-}
-
-.table-card :deep(th:nth-child(5)),
-.table-card :deep(td:nth-child(5)) {
-  width: 8%;
-}
-
-.table-body {
-  flex: 1;
-  overflow-x: auto;
-}
-
-.table-refresh,
-.table-footer {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 10px;
-  border-bottom: 1px solid #eeeeee;
-}
-
-.table-footer {
-  justify-content: flex-end;
-  border-top: 1px solid #eeeeee;
-  border-bottom: 0;
-  background: #f6f6f6;
-  min-height: 44px;
-  padding: 4px 10px;
-}
-
-.page-count {
-  margin-left: auto;
-  color: #475467;
-  font-size: 12px;
-}
-
-.empty-state {
-  min-height: 280px;
-  display: grid;
-  place-items: center;
-  color: #687382;
-  font-size: 13px;
-}
-
-.status-chip {
-  min-width: 86px;
-  justify-content: center;
-  font-weight: 600;
-}
-
-.status-success {
-  background: #dff7e7 !important;
-  color: #1b7f3a !important;
-}
-
-.status-warning {
-  background: #fff0cc !important;
-  color: #9a6700 !important;
-}
-
-.status-error {
-  background: #fde2e1 !important;
-  color: #b42318 !important;
+/* 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;
 }
 
 .small-title {
   font-size: 14px;
   font-weight: 700;
+  color: var(--text);
 }
 
+/* Was `#4f5a66` / `#e53935` - the same two greys on both themes. */
 .field-label {
-  color: #4f5a66;
+  color: var(--text2);
   font-size: 12px;
   font-weight: 600;
   margin-bottom: 6px;
 }
 
 .field-label span {
-  color: #e53935;
+  color: var(--err);
+}
+
+/* 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;
 }
 
 .photo-wrap {
@@ -1527,12 +1431,12 @@ function getHidErrorMessage(error: any) {
 .photo-button {
   width: 120px;
   height: 120px;
-  border: 1px solid #d8dde4;
-  border-radius: 8px;
-  background: #ffffff;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  background: var(--card);
   display: grid;
   place-items: center;
-  color: #98a2b3;
+  color: var(--muted);
   font-size: 12px;
   overflow: hidden;
   position: relative;
@@ -1550,16 +1454,16 @@ function getHidErrorMessage(error: any) {
   width: 28px;
   height: 28px;
   border-radius: 50%;
-  background: #ffffff;
-  color: #00324a;
+  background: var(--card);
+  color: var(--text);
   display: grid;
   place-items: center;
-  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
+  box-shadow: var(--shadow-menu);
 }
 
 .hid-face-avatar {
-  border: 1px solid #d8dde4;
-  background: #f2f4f7;
+  border: 1px solid var(--border);
+  background: var(--hover);
 }
 
 .hidden-input {
@@ -1571,43 +1475,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) {
@@ -1624,10 +1523,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;