@7365admin1/layer-common 3.2.2-staging.118 → 3.2.2-staging.121

package/components/HidReaderManagement.vue

@@ -1,107 +1,105 @@
+<!--
+  HID READER MANAGEMENT - the readers on this site's doors.
+
+  Was a bespoke screen: an above-card toolbar, a raw `v-table` and about
+  twenty-five hardcoded hexes. Those hexes are why this screen had no dark
+  theme - `#111827` on the dark card measures **1.06:1**, and `#475467` 2.17: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 49px rows and the pager. Every column, action,
+  dialog and handler is the same - the table's own `filteredReaders` still
+  feeds it, the overflow menu still opens the same five dialogs.
+
+  The handoff draws no HID table, so it states no column proportions for it -
+  the table takes the shared automatic layout every other `TableMain` caller
+  uses, and scrolls inside the card at 360/768 the way the other wide tables
+  do. See `readerHeaders` for why the screen's own fixed percentages were
+  measured and dropped rather than carried over.
+-->
 <template>
   <section class="hid-reader-management">
-    <div class="toolbar">
-      <v-btn
-        rounded="xl"
-        class="text-none add-button"
-        variant="flat"
-        prepend-icon="mdi-plus"
-        @click="openAdd"
-      >
-        Add HID Reader
-      </v-btn>
-
-      <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"
-      />
-
-      <v-select
-        v-model="status"
-        :items="statusOptions"
-        variant="outlined"
-        density="compact"
-        hide-details
-        class="status-input"
-      />
-    </div>
-
-    <v-card flat border class="table-card">
-      <div class="table-refresh">
-        <v-btn icon="mdi-refresh" variant="text" density="comfortable" :loading="loading" @click="loadReaders" />
-      </div>
-
-      <v-table class="reader-table">
-        <thead>
-          <tr>
-            <th class="name-column">Name</th>
-            <th class="location-column">Location</th>
-            <th class="device-column">Device ID</th>
-            <th class="status-column">Status</th>
-            <th class="sync-at-column">Last sync at</th>
-            <th class="message-column">Last sync message</th>
-            <th class="action-column"></th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="reader in filteredReaders" :key="reader._id">
-            <td class="name-cell">
-              <span class="cell-strong">{{ reader.name || "N/A" }}</span>
-            </td>
-            <td class="location-cell">{{ reader.location || "N/A" }}</td>
-            <td class="device-cell">{{ reader.deviceId || "N/A" }}</td>
-            <td class="status-cell">
-              <v-chip
-                size="small"
-                variant="flat"
-                class="status-chip"
-                :class="getStatusClass(resolveReaderStatus(reader))"
-              >
-                {{ formatReaderStatus(resolveReaderStatus(reader)) }}
-              </v-chip>
-            </td>
-            <td class="sync-at-cell">{{ formatDate(reader.lastSyncAt) }}</td>
-            <td class="message-cell">
-              <span class="message-text" :title="reader.lastSyncMessage || 'N/A'">
-                {{ reader.lastSyncMessage || "N/A" }}
-              </span>
-            </td>
-            <td class="action-cell">
-              <v-menu>
-                <template #activator="{ props: menuProps }">
-                  <v-btn
-                    v-bind="menuProps"
-                    icon="mdi-dots-vertical"
-                    variant="text"
-                    density="comfortable"
-                    class="action-menu-button"
-                  />
-                </template>
-
-                <v-list density="compact" min-width="180">
-                  <v-list-item title="View" @click="openView(reader)" />
-                  <v-list-item title="Sync HID Reader" @click="openSyncConfirm(reader)" />
-                  <v-list-item title="Test Connection" @click="openTestConfirm(reader)" />
-                  <v-list-item title="Edit" @click="openEdit(reader)" />
-                  <v-list-item title="Delete" class="text-error" @click="openDeleteConfirm(reader)" />
-                </v-list>
-              </v-menu>
-            </td>
-          </tr>
-        </tbody>
-      </v-table>
-
-      <div v-if="!filteredReaders.length" class="empty-state">
-        No HID devices added yet.
-      </div>
-    </v-card>
+    <TableMain
+      title="HID Readers"
+      :headers="readerHeaders"
+      :items="filteredReaders"
+      :loading="loading"
+      :items-per-page="-1"
+      :page-range="readerRange"
+      show-header
+      @refresh="loadReaders"
+    >
+      <template #actions>
+        <AppButton icon="mdi-plus" @click="openAdd">Add HID Reader</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-reader-filters">
+          <AppField v-model="search" search placeholder="Search" />
+          <AppSelect v-model="status" :items="statusOptions" />
+        </div>
+      </template>
+
+      <template #[`item.name`]="{ item }">
+        <span class="app-cell--strong">{{ item.name || "N/A" }}</span>
+      </template>
+
+      <template #[`item.location`]="{ item }">
+        <span class="app-cell--muted">{{ item.location || "N/A" }}</span>
+      </template>
+
+      <template #[`item.deviceId`]="{ item }">
+        <span class="app-cell--muted">{{ item.deviceId || "N/A" }}</span>
+      </template>
+
+      <!-- The shared chip, so "Active" is the same green here as on a work
+           order. `utils/status.ts` is the mapping; this screen's own
+           `getStatusClass` was a fourth private copy of it. -->
+      <template #[`item.status`]="{ item }">
+        <StatusChip
+          :status="resolveReaderStatus(item)"
+          :label="formatReaderStatus(resolveReaderStatus(item))"
+        />
+      </template>
+
+      <template #[`item.lastSyncAt`]="{ item }">
+        <span class="app-cell--num">{{ formatDate(item.lastSyncAt) }}</span>
+      </template>
+
+      <template #[`item.lastSyncMessage`]="{ item }">
+        <span class="app-cell--muted" :title="item.lastSyncMessage || 'N/A'">
+          {{ item.lastSyncMessage || "N/A" }}
+        </span>
+      </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="180">
+            <v-list-item title="View" @click="openView(item)" />
+            <v-list-item title="Sync HID Reader" @click="openSyncConfirm(item)" />
+            <v-list-item title="Test Connection" @click="openTestConfirm(item)" />
+            <v-list-item title="Edit" @click="openEdit(item)" />
+            <v-list-item title="Delete" class="text-error" @click="openDeleteConfirm(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 no device has been added yet. -->
+      <template #no-data>
+        <div class="table-card__empty">
+          <v-icon icon="mdi-card-account-details-outline" size="32" />
+          <span>No HID devices added yet.</span>
+        </div>
+      </template>
+    </TableMain>
 
     <HidReaderForm
       v-model="formDialog"
@@ -113,7 +111,7 @@
 
     <v-dialog v-model="viewDialog" max-width="390">
       <v-card rounded="lg">
-        <v-card-title class="small-title">{{ selectedReader?.name || "HID Reader" }}</v-card-title>
+        <v-card-title class="screen-card-title">{{ selectedReader?.name || "HID Reader" }}</v-card-title>
         <v-card-text>
           <div class="detail-grid">
             <span>HID reader name</span><strong>{{ selectedReader?.name || "N/A" }}</strong>
@@ -126,35 +124,35 @@
           </div>
 
           <div class="dialog-actions-inline">
-            <v-btn rounded="xl" class="text-none" variant="tonal" @click="openTestConfirm(selectedReader)">Test Connection</v-btn>
-            <v-btn rounded="xl" class="text-none" variant="tonal" @click="openSyncConfirm(selectedReader)">Sync Reader</v-btn>
+            <AppButton variant="ghost" @click="openTestConfirm(selectedReader)">Test Connection</AppButton>
+            <AppButton variant="ghost" @click="openSyncConfirm(selectedReader)">Sync Reader</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" @click="viewDialog = false">Close</AppButton>
         </v-card-actions>
       </v-card>
     </v-dialog>
 
     <v-dialog v-model="confirmDialog" max-width="390" persistent>
       <v-card rounded="lg" class="reader-action-dialog">
-        <v-card-title class="small-title">{{ confirmTitle }}</v-card-title>
+        <v-card-title class="screen-card-title">{{ confirmTitle }}</v-card-title>
 
         <v-card-text v-if="pendingAction === 'test'" class="reader-action-content">
-          <v-icon icon="mdi-database-sync-outline" color="#1976d2" size="48" />
+          <v-icon icon="mdi-database-sync-outline" class="dialog-mark" size="48" />
           <h3>Test Device Connection</h3>
           <p>You are about to test the connection for {{ selectedReader?.name || "this HID Reader" }}.</p>
         </v-card-text>
 
         <v-card-text v-else-if="pendingAction === 'sync' && actionStage === 'confirm'" class="reader-action-content">
-          <v-icon icon="mdi-database-sync-outline" color="#1976d2" size="48" />
+          <v-icon icon="mdi-database-sync-outline" class="dialog-mark" size="48" />
           <h3>Sync Data</h3>
           <p>You're about to sync data with {{ selectedReader?.name || "this HID Reader" }}.</p>
         </v-card-text>
 
         <v-card-text v-else-if="pendingAction === 'sync' && actionStage === 'review'" class="reader-action-content reader-sync-review">
-          <v-icon icon="mdi-database-sync-outline" color="#1976d2" size="48" />
+          <v-icon icon="mdi-database-sync-outline" class="dialog-mark" size="48" />
           <h3>Ready to Synchronize</h3>
           <div class="sync-summary-list">
             <div>
@@ -182,7 +180,7 @@
         </v-card-text>
 
         <v-card-text v-else-if="pendingAction === 'sync' && actionStage === 'loading'" class="reader-action-content">
-          <v-progress-circular indeterminate color="#8a8f98" size="42" width="5" />
+          <v-progress-circular indeterminate class="dialog-spinner" size="42" width="5" />
           <h3>Sync Data to {{ selectedReader?.name || "HID Reader" }}...</h3>
         </v-card-text>
 
@@ -208,7 +206,7 @@
 
     <v-dialog v-model="resultDialog" max-width="390">
       <v-card rounded="lg">
-        <v-card-title v-if="resultReaderName" class="small-title">{{ resultReaderName }}</v-card-title>
+        <v-card-title v-if="resultReaderName" class="screen-card-title">{{ resultReaderName }}</v-card-title>
         <v-card-text class="result-content" :class="{ 'result-with-stats': resultStats }">
           <v-icon :icon="resultSuccess ? 'mdi-check-circle' : 'mdi-alert-circle'" :color="resultSuccess ? 'success' : 'warning'" size="42" />
           <h3>{{ resultTitle }}</h3>
@@ -284,6 +282,37 @@ const resultStats = ref<typeof syncPreviewStats.value | null>(null);
 
 const statusOptions = ["Status", "active", "inactive", "deleted", "offline"];
 
+/**
+ * The columns. NO `weight`, on purpose.
+ *
+ * The old CSS pinned them at 19/14/15/12/15/20/5 % with `table-layout: fixed`,
+ * and `TableMain`'s `weight` would say exactly that - but it was measured and
+ * it is worse than the automatic layout, in two ways the design cares about:
+ *
+ *   * at 360 the six percentages resolve against a ~330px card, so every cell
+ *     truncates to "Mai...", the headers overlap and the status chip is cut in
+ *     half. The old fixed grid only worked because it also carried
+ *     `min-width: 920px`, which is the automatic layout's behaviour anyway.
+ *   * a 5% action column is ~29px of content once the shared 20px cell padding
+ *     is taken out, so the 30px row button overflows by half a pixel and the
+ *     fixed-layout ellipsis rule paints a "..." beside every button.
+ *
+ * The handoff states `fr` proportions for the tables it draws (Feedbacks,
+ * Units, Pass & Key) and draws no HID table at all, so there is no design
+ * number to honour here. Automatic is what the other 39 `TableMain` callers
+ * use. `sortable: false` keeps the previous behaviour: the raw `v-table` never
+ * sorted.
+ */
+const readerHeaders = [
+  { title: "Name", value: "name", sortable: false },
+  { title: "Location", value: "location", sortable: false },
+  { title: "Device ID", value: "deviceId", sortable: false },
+  { title: "Status", value: "status", sortable: false },
+  { title: "Last sync at", value: "lastSyncAt", sortable: false },
+  { title: "Last sync message", value: "lastSyncMessage", sortable: false },
+  { title: "", value: "action-table", sortable: false },
+];
+
 const filteredReaders = computed(() => {
   const query = search.value.trim().toLowerCase();
   return readers.value.filter((reader) => {
@@ -301,6 +330,15 @@ const filteredReaders = computed(() => {
   });
 });
 
+/**
+ * The design's `1-6 of 6` count on the toolbar row. This screen loads every
+ * reader in one call and has never paged, so the range is simply what is on
+ * screen - stated rather than left as `TableMain`'s `-- - -- of --` placeholder.
+ */
+const readerRange = computed(() =>
+  filteredReaders.value.length ? `1 - ${filteredReaders.value.length} of ${filteredReaders.value.length}` : "0 of 0"
+);
+
 const confirmTitle = computed(() => {
   if (pendingAction.value === "sync" && actionStage.value === "loading") return "Test Connection...";
   if (pendingAction.value === "sync") return "Sync Data";
@@ -916,13 +954,6 @@ function formatDate(value?: string) {
   return Number.isNaN(date.getTime()) ? "N/A" : date.toLocaleString();
 }
 
-function getStatusClass(value?: string) {
-  if (value === "active") return "status-success";
-  if (value === "inactive") return "status-warning";
-  if (value === "deleted") return "status-error";
-  return "status-muted";
-}
-
 function resolveReaderStatus(reader?: Record<string, any> | null) {
   if (!reader) return "";
   if (reader.lastSyncStatus === "failed" && reader.status === "active") return "offline";
@@ -943,208 +974,49 @@ function formatReaderStatus(value?: string) {
 }
 </script>
 
+
 <style scoped>
+/*
+  WHAT IS LEFT AFTER THE CARD AND TABLE MOVED TO `TableMain`.
+
+  The toolbar, the card, the `reader-table` grid, the seven column widths, the
+  header band, the row height, the hover, the empty state and the four
+  `status-*` chip palettes are all gone - they were a private copy of the shared
+  table, drawn in about twenty-five literal hexes. What remains is the two
+  dialogs, and every colour in them is now a token, so the dark theme reaches
+  them for the first time.
+*/
 .hid-reader-management {
   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;
-}
-
-.add-button {
-  min-width: 170px;
-  background: #e4e4e4;
-  color: #0a2638;
+.hid-reader-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;
 }
 
-.search-input {
+.hid-reader-filters :deep(.app-field) {
   max-width: 240px;
 }
 
-.status-input {
+.hid-reader-filters :deep(.app-select) {
   max-width: 160px;
 }
 
-.table-card {
-  min-height: 430px;
-  overflow-x: auto;
-  overflow-y: hidden;
-}
-
-.reader-table :deep(table) {
-  table-layout: fixed;
-  width: 100%;
-  min-width: 920px;
-  border-collapse: separate;
-  border-spacing: 0;
-}
-
-.reader-table :deep(th) {
-  height: 44px;
-  background: #f8fafc;
-  color: #344054;
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0;
-  text-transform: none;
-  border-bottom: 1px solid #e7ebef;
-}
-
-.reader-table :deep(td) {
-  height: 64px;
-  color: #1f2937;
-  font-size: 13px;
-  border-bottom: 1px solid #edf0f3;
-  vertical-align: middle;
-}
-
-.reader-table :deep(tbody tr) {
-  transition: background-color 0.15s ease;
-}
-
-.reader-table :deep(tbody tr:hover) {
-  background: #fbfcfe;
-}
-
-.reader-table :deep(th),
-.reader-table :deep(td) {
-  padding: 0 14px !important;
-  white-space: nowrap;
-}
-
-.name-column,
-.name-cell {
-  width: 19%;
-}
-
-.location-column,
-.location-cell {
-  width: 14%;
-}
-
-.device-column,
-.device-cell {
-  width: 15%;
-}
-
-.status-column,
-.status-cell {
-  width: 12%;
-}
-
-.sync-at-column,
-.sync-at-cell {
-  width: 15%;
-}
-
-.message-column,
-.message-cell {
-  width: 20%;
-  min-width: 0;
-}
-
-.action-column,
-.action-cell {
-  width: 5%;
-  text-align: right;
-}
-
-.cell-strong {
-  display: block;
-  overflow: hidden;
-  color: #111827;
-  font-weight: 600;
-  text-overflow: ellipsis;
-}
-
-.location-cell,
-.device-cell,
-.sync-at-cell {
-  overflow: hidden;
-  color: #475467;
-  text-overflow: ellipsis;
-}
-
-.message-text {
-  display: block;
-  max-width: 100%;
-  overflow: hidden;
-  color: #475467;
-  line-height: 1.35;
-  text-overflow: ellipsis;
-}
-
-.action-menu-button {
-  color: #344054;
-}
-
-.table-refresh {
-  display: flex;
-  justify-content: flex-start;
-  padding: 10px 14px;
-  border-bottom: 1px solid #e7ebef;
-  background: #ffffff;
-}
-
-.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;
-}
-
-.status-muted {
-  background: #e9edf2 !important;
-  color: #475467 !important;
-}
-
-.small-title {
-  font-size: 14px;
-  font-weight: 700;
-}
-
 .detail-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 8px 16px;
   font-size: 13px;
+  color: var(--text);
 }
 
 .detail-grid span {
-  color: #667085;
+  color: var(--muted);
 }
 
 .dialog-actions-inline {
@@ -1169,7 +1041,7 @@ function formatReaderStatus(value?: string) {
 
 .reader-action-content h3 {
   margin: 4px 0 0;
-  color: #111827;
+  color: var(--text);
   font-size: 15px;
   font-weight: 700;
   line-height: 1.3;
@@ -1177,11 +1049,21 @@ function formatReaderStatus(value?: string) {
 
 .reader-action-content p {
   margin: 0;
-  color: #667085;
+  color: var(--muted);
   font-size: 13px;
   line-height: 1.45;
 }
 
+/* Was `color="#1976d2"` and `color="#8a8f98"` on the elements themselves - the
+   same blue and the same grey on both themes. */
+.dialog-mark {
+  color: var(--accent);
+}
+
+.dialog-spinner {
+  color: var(--muted);
+}
+
 .reader-sync-review {
   justify-items: stretch;
   text-align: left;
@@ -1205,24 +1087,32 @@ function formatReaderStatus(value?: string) {
   align-items: center;
   justify-content: space-between;
   gap: 16px;
-  color: #667085;
+  color: var(--muted);
   font-size: 13px;
 }
 
 .sync-summary-list strong {
-  color: #111827;
+  color: var(--text);
   font-weight: 700;
 }
 
+/* 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. */
 .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);
 }
 
 .result-content {
@@ -1246,24 +1136,11 @@ function formatReaderStatus(value?: string) {
 }
 
 @media (max-width: 960px) {
-  .toolbar {
-    align-items: stretch;
-  }
-
-  .toolbar-spacer {
-    display: none;
-  }
-
-  .add-button,
-  .search-input,
-  .status-input {
+  .hid-reader-filters :deep(.app-field),
+  .hid-reader-filters :deep(.app-select) {
     max-width: none;
     width: 100%;
   }
-
-  .table-card {
-    min-height: 360px;
-  }
 }
 
 @media (max-width: 600px) {
@@ -1275,7 +1152,7 @@ function formatReaderStatus(value?: string) {
     grid-template-columns: 1fr;
   }
 
-  .dialog-actions-inline .v-btn {
+  .dialog-actions-inline .app-btn {
     width: 100%;
   }