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

package/components/HidAccessLogDashboard.vue

@@ -1,140 +1,140 @@
+<!--
+  HID ACCESS LOG DASHBOARD - who went through a reader, and when.
+
+  Was a bespoke screen: an above-card toolbar, a `v-tabs` strip, a raw
+  `v-table`, a footer pager, an empty state and its own two-colour chip
+  palette, in about forty literal hexes. Those literals are why it had no dark
+  theme - `#0a2638` on the dark card measures **1.07:1**.
+
+  It is the design's standard table screen WITH TABS, so it is drawn with the
+  shared one: `TableMain` supplies the heading, the card, the in-card toolbar,
+  the `app-tab` strip, the uppercase header row, the row spec and the pager;
+  search, the reader picker and the status filter move onto the card's
+  `extension` row. Every row, tab, action, dialog and handler is unchanged -
+  the same `paginatedRows` still feed the table and the history icon still
+  opens the same dialog.
+
+  The handoff draws no HID table, so it states no column proportions - the
+  table takes `TableMain`'s automatic layout, as panels 2 and 4 do.
+-->
 <template>
   <section class="hid-access-log-dashboard">
-    <div class="toolbar">
-      <v-btn
-        rounded="xl"
-        class="text-none export-button"
-        variant="flat"
-        prepend-icon="mdi-download"
-        @click="openExportDialog"
-      >
-        Export
-      </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="loadDashboard"
-      />
-
-      <div class="toolbar-spacer" />
-
-      <v-text-field
-        v-model="search"
-        placeholder="Search"
-        variant="outlined"
-        density="compact"
-        hide-details
-        class="search-input"
-      />
-
-      <v-select
-        v-model="status"
-        :items="statusOptions"
-        variant="outlined"
-        density="compact"
-        hide-details
-        class="status-input"
-      />
-    </div>
-
-    <v-card flat border class="table-card">
-      <v-tabs
-        v-model="activeTab"
-        class="access-tabs"
-        density="compact"
-        @update:model-value="onTabChange"
-      >
-        <v-tab value="resident" class="text-none">Resident</v-tab>
-        <v-tab value="visitor" class="text-none">Visitor</v-tab>
-        <v-tab value="administrator" class="text-none">Administrator</v-tab>
-      </v-tabs>
-
-      <div class="table-body">
-        <v-table>
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Facial Data</th>
-              <th>Last Access Method</th>
-              <th>Last access time</th>
-              <th>Status</th>
-              <th class="text-right"></th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="row in paginatedRows" :key="row.key">
-              <td>
-                <div class="name-cell">
-                  {{ row.name }}
-                  <v-tooltip v-if="row.name && row.name !== 'N/A'" activator="parent" location="top">
-                    {{ row.name }}
-                  </v-tooltip>
-                </div>
-              </td>
-              <td>
-                <v-avatar v-if="row.faceImage" size="34" rounded="lg" class="hid-face-avatar">
-                  <v-img :src="row.faceImage" cover />
-                </v-avatar>
-                <span v-else>{{ row.facialData }}</span>
-              </td>
-              <td>{{ row.method }}</td>
-              <td>{{ row.lastAccessTime }}</td>
-              <td>
-                <v-chip
-                  size="small"
-                  variant="flat"
-                  class="status-chip"
-                  :class="getAuthorizationChipClass(row.status)"
-                >
-                  {{ row.status }}
-                  <v-tooltip v-if="row.authorizationReason" activator="parent" location="top">
-                    {{ row.authorizationReason }}
-                  </v-tooltip>
-                </v-chip>
-              </td>
-              <td class="text-right">
-                <v-btn
-                  icon="mdi-history"
-                  variant="text"
-                  density="comfortable"
-                  @click="openHistoryDialog(row)"
-                />
-              </td>
-            </tr>
-          </tbody>
-        </v-table>
-
-        <div v-if="!filteredRows.length" class="empty-state">
-          No access logs found.
+    <TableMain
+      title="Access Logs"
+      :headers="logHeaders"
+      :items="paginatedRows"
+      :loading="loading"
+      :items-per-page="-1"
+      :page="page"
+      :pages="pages"
+      :page-range="pageRange"
+      item-value="key"
+      show-header
+      @refresh="loadDashboard"
+      @update:page="page = $event"
+    >
+      <template #actions>
+        <AppButton icon="mdi-download" @click="openExportDialog">Export</AppButton>
+      </template>
+
+      <!-- Was `v-tabs`/`v-tab`, whose selected state is drawn from Vuetify's
+           `on-surface` rather than the design's accent underline. `.app-tab` is
+           the shared strip every other tabbed table already uses. -->
+      <template #tabs>
+        <button
+          v-for="tab in tabOptions"
+          :key="tab.value"
+          type="button"
+          role="tab"
+          class="app-tab"
+          :class="{ 'app-tab--active': activeTab === tab.value }"
+          :aria-selected="activeTab === tab.value"
+          @click="activeTab = tab.value; onTabChange(tab.value)"
+        >
+          {{ tab.label }}
+        </button>
+      </template>
+
+      <template #extension>
+        <div class="app-filter-row hid-log-filters">
+          <AppSelect
+            v-if="readers.length"
+            v-model="selectedReaderId"
+            class="reader-select"
+            :items="readerOptions"
+            @update:model-value="loadDashboard"
+          />
+          <AppField v-model="search" search placeholder="Search" />
+          <AppSelect v-model="status" :items="statusOptions" />
         </div>
-      </div>
-
-      <div class="table-footer">
-        <span>{{ pageRange }}</span>
-        <v-btn
-          icon="mdi-chevron-left"
-          variant="text"
-          density="comfortable"
-          :disabled="page <= 1"
-          @click="page--"
-        />
-        <v-btn
-          icon="mdi-chevron-right"
-          variant="text"
-          density="comfortable"
-          :disabled="page >= pages"
-          @click="page++"
+      </template>
+
+      <!-- Staging's hover-the-full-name tooltip, kept. -->
+      <template #[`item.name`]="{ item }">
+        <span class="app-cell--strong">
+          {{ item.name }}
+          <v-tooltip
+            v-if="item.name && item.name !== 'N/A'"
+            activator="parent"
+            location="top"
+          >
+            {{ item.name }}
+          </v-tooltip>
+        </span>
+      </template>
+
+      <!-- The face thumbnail, unchanged. It prints whatever the row already
+           carried; this screen does not read or export a template. -->
+      <template #[`item.facialData`]="{ item }">
+        <v-avatar v-if="item.faceImage" size="34" rounded="lg" class="hid-face-avatar">
+          <v-img :src="item.faceImage" cover />
+        </v-avatar>
+        <span v-else class="app-cell--muted">{{ item.facialData }}</span>
+      </template>
+
+      <template #[`item.method`]="{ item }">
+        <span class="app-cell--muted">{{ item.method }}</span>
+      </template>
+
+      <template #[`item.lastAccessTime`]="{ item }">
+        <span class="app-cell--num">{{ item.lastAccessTime }}</span>
+      </template>
+
+      <!-- The shared chip. This screen's `mapped-chip` / `unmapped-chip` /
+           `unknown-chip` were a private copy of the same three tones
+           `utils/status.ts` now carries for Authorized / Not Authorized /
+           Unknown. Staging's reason tooltip rides on the chip. -->
+      <template #[`item.status`]="{ item }">
+        <StatusChip :status="item.status">
+          {{ item.status }}
+          <v-tooltip
+            v-if="item.authorizationReason"
+            activator="parent"
+            location="top"
+          >
+            {{ item.authorizationReason }}
+          </v-tooltip>
+        </StatusChip>
+      </template>
+
+      <template #[`item.action-table`]="{ item }">
+        <AppButton
+          variant="row"
+          icon="mdi-history"
+          aria-label="View access history"
+          @click="openHistoryDialog(item)"
         />
-      </div>
-    </v-card>
+      </template>
+
+      <!-- The screen's own sentence, kept: the shared empty state says "No data
+           available", which says less than naming what was searched for. -->
+      <template #no-data>
+        <div class="table-card__empty">
+          <v-icon icon="mdi-history" size="32" />
+          <span>No access logs found.</span>
+        </div>
+      </template>
+    </TableMain>
 
     <v-dialog v-model="historyDialog" max-width="980">
       <v-card class="history-dialog" rounded="lg">
@@ -142,17 +142,16 @@
 
         <v-card-text class="history-body">
           <div class="history-toolbar">
-            <v-btn
-              rounded="xl"
-              class="text-none export-button"
-              variant="flat"
-              prepend-icon="mdi-download"
-              @click="openExportDialog('history')"
-            >
+            <AppButton icon="mdi-download" @click="openExportDialog('history')">
               Export Log
-            </v-btn>
+            </AppButton>
             <div class="toolbar-spacer" />
-            <v-btn icon="mdi-close" variant="text" density="comfortable" @click="historyDialog = false" />
+            <AppButton
+              variant="icon"
+              icon="mdi-close"
+              aria-label="Close access log"
+              @click="historyDialog = false"
+            />
           </div>
 
           <v-card flat border class="history-table-card">
@@ -177,18 +176,17 @@
                   <td>{{ row.readerLocation }}</td>
                   <td>{{ row.method }}</td>
                   <td>{{ row.lastAccessTime }}</td>
+                  <!-- Staging's authorization column, on the shared chip: the
+                       private `mapped-chip`/`unmapped-chip`/`unknown-chip`
+                       palette is gone, and `utils/status.ts` carries the same
+                       three tones for these three words. -->
                   <td>
-                    <v-chip
-                      size="small"
-                      variant="flat"
-                      class="status-chip"
-                      :class="getAuthorizationChipClass(row.status)"
-                    >
+                    <StatusChip :status="row.status">
                       {{ row.status }}
                       <v-tooltip v-if="row.authorizationReason" activator="parent" location="top">
                         {{ row.authorizationReason }}
                       </v-tooltip>
-                    </v-chip>
+                    </StatusChip>
                   </td>
                 </tr>
               </tbody>
@@ -207,116 +205,54 @@
         <v-card-title class="dialog-title">Export</v-card-title>
 
         <v-card-text class="dialog-body">
+          <!--
+            Was a `v-menu` + `v-text-field` + `v-date-picker` per date. The
+            design's date end is `AppDateField` - a native `<input type="date">`,
+            which brings the platform's own picker, localisation and keyboard
+            support instead of a 320px popover. `exportForm` still holds
+            DD/MM/YYYY, so everything downstream is untouched; the two computeds
+            below translate at the edge.
+          -->
           <div class="field-label">Start Date <span>*</span></div>
-          <v-menu
-            v-model="startDateMenu"
-            :close-on-content-click="false"
-            location="bottom"
-            content-class="compact-date-menu"
-          >
-            <template #activator="{ props: menuProps }">
-              <v-text-field
-                v-bind="menuProps"
-                v-model="exportForm.startDate"
-                aria-label="Start Date"
-                prepend-inner-icon="mdi-calendar"
-                placeholder="DD/MM/YYYY"
-                density="compact"
-                variant="outlined"
-                hide-details="auto"
-                readonly
-                class="mb-3"
-              />
-            </template>
-            <v-date-picker
-              :model-value="parseExportDate(exportForm.startDate, false)"
-              hide-header
-              width="320"
-              class="compact-date-picker"
-              @update:model-value="setExportDate('startDate', $event)"
-            />
-          </v-menu>
+          <AppDateField v-model="exportStartInput" aria-label="Start Date" class="mb-3" />
 
           <div class="field-label">End Date <span>*</span></div>
-          <v-menu
-            v-model="endDateMenu"
-            :close-on-content-click="false"
-            location="bottom"
-            content-class="compact-date-menu"
-          >
-            <template #activator="{ props: menuProps }">
-              <v-text-field
-                v-bind="menuProps"
-                v-model="exportForm.endDate"
-                aria-label="End Date"
-                prepend-inner-icon="mdi-calendar"
-                placeholder="DD/MM/YYYY"
-                density="compact"
-                variant="outlined"
-                hide-details="auto"
-                readonly
-                class="mb-3"
-              />
-            </template>
-            <v-date-picker
-              :model-value="parseExportDate(exportForm.endDate, false)"
-              hide-header
-              width="320"
-              class="compact-date-picker"
-              @update:model-value="setExportDate('endDate', $event)"
-            />
-          </v-menu>
+          <AppDateField v-model="exportEndInput" aria-label="End Date" class="mb-3" />
 
           <div class="field-label">Users</div>
-          <v-select
+          <AppSelect
             v-model="exportForm.users"
             :items="userOptions"
-            item-title="title"
-            item-value="value"
             aria-label="Users"
             placeholder="Select"
-            density="compact"
-            variant="outlined"
-            hide-details="auto"
             multiple
-            chips
-            closable-chips
             class="mb-3"
           />
 
           <div class="field-label">Access Method</div>
-          <v-select
+          <AppSelect
             v-model="exportForm.accessMethod"
             :items="accessMethodOptions"
             aria-label="Access Method"
             placeholder="Select"
-            density="compact"
-            variant="outlined"
-            hide-details="auto"
             class="mb-3"
           />
 
           <div class="field-label">Reader Location</div>
-          <v-select
+          <AppSelect
             v-model="exportForm.readerLocation"
             :items="readerLocationOptions"
             aria-label="Reader Location"
             placeholder="Select"
-            density="compact"
-            variant="outlined"
-            hide-details="auto"
             class="mb-3"
           />
 
           <div class="field-label">Status (Optional)</div>
-          <v-select
+          <AppSelect
             v-model="exportForm.status"
             :items="statusOptions"
             aria-label="Status"
             placeholder="Select"
-            density="compact"
-            variant="outlined"
-            hide-details="auto"
           />
         </v-card-text>
 
@@ -396,8 +332,6 @@ const exportDialog = ref(false);
 const historyDialog = ref(false);
 const selectedHistoryRow = ref<AccessRow>();
 const exportScope = ref<"dashboard" | "history">("dashboard");
-const startDateMenu = ref(false);
-const endDateMenu = ref(false);
 const exportForm = reactive({
   startDate: "",
   endDate: "",
@@ -514,6 +448,33 @@ const filteredRows = computed(() => {
   });
 });
 
+/**
+ * The three tabs, as data rather than three `v-tab` elements, so the shared
+ * `app-tab` strip can render them. Same values, same order, same handler.
+ */
+const tabOptions: Array<{ label: string; value: AccessTab }> = [
+  { label: "Resident", value: "resident" },
+  { label: "Visitor", value: "visitor" },
+  { label: "Administrator", value: "administrator" },
+];
+
+/**
+ * `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 column
+ * percentages had no design number behind them.
+ */
+const logHeaders = [
+  { title: "Name", value: "name", sortable: false },
+  { title: "Facial Data", value: "facialData", sortable: false },
+  // Staging (b0667a7) dropped Unit from this table - the unit still shows in
+  // the per-identity history dialog, so the column is not carried back.
+  { title: "Last Access Method", value: "method", sortable: false },
+  { title: "Last access time", value: "lastAccessTime", sortable: false },
+  { title: "Status", value: "status", sortable: false },
+  { title: "", value: "action-table", sortable: false },
+];
+
 const pages = computed(() => Math.max(1, Math.ceil(filteredRows.value.length / limit)));
 
 const paginatedRows = computed(() => {
@@ -1062,18 +1023,32 @@ function parseExportDate(value: string, endOfDay: boolean) {
   return date;
 }
 
-function setExportDate(field: "startDate" | "endDate", value: unknown) {
-  const date = normalizePickerDate(value);
-  if (!date) return;
-
-  exportForm[field] = toDisplayDate(date);
-  if (field === "startDate") {
-    startDateMenu.value = false;
-  } else {
-    endDateMenu.value = false;
-  }
+/**
+ * `exportForm` stores DD/MM/YYYY, because that is what `parseExportDate`,
+ * `isWithinExportRange` and the PDF header all read. A native `<input
+ * type="date">` speaks YYYY-MM-DD. Rather than change the stored format - which
+ * would reach into the export itself - the translation happens here, at the
+ * edge, exactly where the old `v-date-picker` did it.
+ */
+function exportDateModel(field: "startDate" | "endDate") {
+  return computed({
+    get: () => {
+      const date = parseExportDate(exportForm[field], false);
+      if (!date) return "";
+      const month = String(date.getMonth() + 1).padStart(2, "0");
+      const day = String(date.getDate()).padStart(2, "0");
+      return `${date.getFullYear()}-${month}-${day}`;
+    },
+    set: (value: string) => {
+      const date = normalizePickerDate(value);
+      exportForm[field] = date ? toDisplayDate(date) : "";
+    },
+  });
 }
 
+const exportStartInput = exportDateModel("startDate");
+const exportEndInput = exportDateModel("endDate");
+
 function normalizePickerDate(value: unknown) {
   if (value instanceof Date && !Number.isNaN(value.getTime())) {
     return value;
@@ -1274,12 +1249,6 @@ function getAuthorizationStatus(
   };
 }
 
-function getAuthorizationChipClass(status: AuthorizationStatus) {
-  if (status === "Authorized") return "mapped-chip";
-  if (status === "Not Authorized") return "unmapped-chip";
-  return "unknown-chip";
-}
-
 function findIdentityForAccessLog(rawLog: Record<string, any>, event: Record<string, any>) {
   const eventIdentityId = event.payload?.identity?._id;
   if (eventIdentityId) {
@@ -1501,6 +1470,12 @@ function drawAccessLogPdf(pdf: any, rows: PdfAccessRow[]) {
   });
 }
 
+/**
+ * The EXPORTED PDF, not a screen. Its colours stay literal on purpose: a PDF is
+ * white paper with dark ink whichever theme the operator happens to be in, and
+ * theming it would produce a document that does not match what prints. Same
+ * reasoning as the printed pass preview in `HidQrCodeConfiguration`.
+ */
 function buildPdfHtml() {
   const rows = exportRowsData.value.map((row) => ({
     name: row.name,
@@ -1678,106 +1653,53 @@ function escapeHtml(value: unknown) {
 </script>
 
 <style scoped>
+/*
+  WHAT IS LEFT AFTER THE CARD, TABS AND TABLE MOVED TO `TableMain`.
+
+  The toolbar, the card, the `v-tabs` strip and its seven column widths, the
+  footer pager, the empty state and the two private chip palettes are gone -
+  they were a private copy of the shared table drawn in literal hexes. The
+  `compact-date-menu` / `compact-date-picker` global overrides go with the
+  `v-date-picker` they were correcting: a native date input needs none of them.
+
+  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-access-log-dashboard {
   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;
 }
 
-.export-button {
-  min-width: 170px;
-  background: #e4e4e4;
-  color: #0a2638;
+.hid-log-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-log-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-body {
-  flex: 1;
-  overflow-x: auto;
-}
-
-.table-card :deep(table) {
-  table-layout: fixed;
-  width: 100%;
-  min-width: 880px;
-}
-
-.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: 25%;
-}
-
-.table-card :deep(th:nth-child(2)),
-.table-card :deep(td:nth-child(2)) {
-  width: 13%;
-}
-
-.table-card :deep(th:nth-child(3)),
-.table-card :deep(td:nth-child(3)) {
-  width: 21%;
-}
-
-.table-card :deep(th:nth-child(4)),
-.table-card :deep(td:nth-child(4)) {
-  width: 21%;
-}
-
-.table-card :deep(th:nth-child(5)),
-.table-card :deep(td:nth-child(5)) {
-  width: 14%;
-}
-
-.table-card :deep(th:nth-child(6)),
-.table-card :deep(td:nth-child(6)) {
-  width: 6%;
-}
-
-.name-cell {
-  display: block;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+/* 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-log-filters :deep(.app-field.reader-select) {
+  max-width: 320px;
 }
 
 .history-dialog {
   overflow: hidden;
 }
 
+/* Was `#4d9bc2`, a fixed blue that sat on the dark card unchanged. */
 .history-title {
-  color: #4d9bc2;
+  color: var(--accent-text);
   font-size: 18px;
   font-weight: 600;
   padding: 16px 20px 8px;
@@ -1797,10 +1719,34 @@ function escapeHtml(value: unknown) {
 .history-table-card {
   overflow-x: auto;
   overflow-y: hidden;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  background: var(--card);
 }
 
 .history-table-card :deep(table) {
   min-width: 760px;
+  background: transparent;
+}
+
+/*
+  The history table stays a `v-table` rather than a nested `TableMain` - it is
+  a read-only strip inside a dialog with no toolbar, pager or filters, and
+  nesting the full card inside a dialog would draw a second heading. Its
+  colours become tokens so it follows the theme; its SHAPE is unchanged.
+*/
+.history-table-card :deep(th) {
+  background: var(--thead);
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.history-table-card :deep(td) {
+  color: var(--text);
+  font-size: 13px;
 }
 
 .table-refresh {
@@ -1808,79 +1754,16 @@ function escapeHtml(value: unknown) {
   display: flex;
   align-items: center;
   padding: 0 14px;
-  background: #f3f3f3;
-  border-bottom: 1px solid #e7e7e7;
-  color: #0a2638;
-}
-
-.table-footer {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 8px;
-  min-height: 44px;
-  padding: 4px 10px;
-  border-top: 1px solid #eeeeee;
-  background: #f6f6f6;
-  color: #0a2638;
-  font-size: 13px;
-}
-
-.access-tabs {
-  border-bottom: 1px solid #eeeeee;
-}
-
-.access-tabs :deep(.v-slide-group__content) {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  width: 100%;
-}
-
-.access-tabs :deep(.v-tab) {
-  flex: none;
-  min-width: 0;
-  width: 100%;
-  max-width: none;
-  color: #0a2638;
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.access-tabs :deep(.v-tab--selected) {
-  font-weight: 600;
-}
-
-.status-chip {
-  min-width: 110px;
-  justify-content: center;
-  font-weight: 600;
-}
-
-.mapped-chip {
-  background: #dff7e7 !important;
-  color: #1b7f3a !important;
-}
-
-.unmapped-chip {
-  background: #fde8e8 !important;
-  color: #b42318 !important;
-}
-
-.unknown-chip {
-  background: #fff0cc !important;
-  color: #9a6700 !important;
-}
-
-.hid-face-avatar {
-  border: 1px solid #d8dde4;
-  background: #f2f4f7;
+  background: var(--thead);
+  border-bottom: 1px solid var(--border);
+  color: var(--muted);
 }
 
 .empty-state {
   min-height: 280px;
   display: grid;
   place-items: center;
-  color: #687382;
+  color: var(--muted);
   font-size: 13px;
 }
 
@@ -1892,73 +1775,52 @@ function escapeHtml(value: unknown) {
   font-size: 14px;
   font-weight: 700;
   padding: 12px 16px;
-  border-bottom: 1px solid #ececec;
+  border-bottom: 1px solid var(--border);
+  color: var(--text);
 }
 
 .dialog-body {
   padding: 18px 16px 20px;
 }
 
+/* Was `#4f5a66` / `#e53935` - the same two colours 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);
 }
 
+/* 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 panels 2 and 4. */
 .dialog-actions {
   display: grid;
   grid-template-columns: 1fr 1fr;
 }
 
 .action-cancel {
-  background: #ffffff;
-  color: #111827;
+  background: var(--card);
+  color: var(--text2);
   border-radius: 0;
 }
 
 .action-submit {
-  background: #062d42;
-  color: #ffffff;
+  background: var(--accent-strong);
+  color: var(--on-accent-strong);
   border-radius: 0;
 }
 
-:global(.compact-date-menu) {
-  max-width: 320px;
-}
-
-:global(.compact-date-menu .v-overlay__content) {
-  max-width: 320px;
-}
-
-:global(.compact-date-picker) {
-  border-radius: 8px;
-  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);
-}
-
-:global(.compact-date-picker .v-picker-title),
-:global(.compact-date-picker .v-date-picker-header) {
-  display: none;
-}
-
-:global(.compact-date-picker .v-picker__body) {
-  padding-top: 4px;
-}
-
-:global(.compact-date-picker .v-date-picker-month) {
-  padding: 0 12px 12px;
-}
-
-:global(.compact-date-picker .v-date-picker-month__day) {
-  height: 34px;
+.hid-face-avatar {
+  border: 1px solid var(--border);
+  background: var(--hover);
 }
 
 @media (max-width: 960px) {
-  .toolbar,
   .history-toolbar {
     align-items: stretch;
   }
@@ -1967,17 +1829,11 @@ function escapeHtml(value: unknown) {
     display: none;
   }
 
-  .export-button,
-  .reader-input,
-  .search-input,
-  .status-input {
+  .hid-log-filters :deep(.app-field),
+  .hid-log-filters :deep(.app-select) {
     max-width: none;
     width: 100%;
   }
-
-  .table-card {
-    min-height: 360px;
-  }
 }
 
 @media (max-width: 600px) {
@@ -1985,14 +1841,6 @@ function escapeHtml(value: unknown) {
     padding: 12px 0;
   }
 
-  .access-tabs :deep(.v-slide-group__content) {
-    display: flex;
-  }
-
-  .access-tabs :deep(.v-tab) {
-    min-width: 132px;
-  }
-
   .history-body {
     padding: 0 12px 12px;
   }
@@ -2009,12 +1857,5 @@ function escapeHtml(value: unknown) {
     max-width: calc(100vw - 24px) !important;
     margin: 12px !important;
   }
-
-  :global(.compact-date-menu),
-  :global(.compact-date-menu .v-overlay__content),
-  :global(.compact-date-picker) {
-    max-width: calc(100vw - 32px) !important;
-    width: calc(100vw - 32px) !important;
-  }
 }
 </style>