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

package/components/VisitorFormSelection.vue

@@ -1,46 +1,23 @@
 <template>
-  <v-card width="100%">
-    <v-toolbar>
-      <v-row no-gutters class="fill-height px-6" align="center">
-        <span class="font-weight-bold text-h5 text-capitalize">
-          {{ mode }} Visitor
-        </span>
-      </v-row>
-    </v-toolbar>
+  <v-card width="100%" class="screen-modal visitor-select">
+    <v-card-title class="text-capitalize">{{ mode }} Visitor</v-card-title>
 
-    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-5">
-      <span class="text-subtitle-2 w-100 font-weight-medium d-flex justify-center mb-3">Please Select Visitor Type</span>
+    <div class="screen-modal__body visitor-select__body">
+      <p class="visitor-select__hint">Please Select Visitor Type</p>
       <template v-for="item in selection" :key="item.value">
-        <v-btn
+        <AppButton
           v-if="showSelection(item)"
-          color="primary-button"
-          block
-          variant="flat"
-          rounded="md"
-          size="48"
-          :text="item.label"
+          class="visitor-select__option"
           @click="select(item.value)"
-          class="my-2 text-capitalize text-subtitle-2"
-        />
+        >
+          {{ item.label }}
+        </AppButton>
       </template>
-    </v-card-text>
+    </div>
 
-    <v-toolbar density="compact">
-      <v-row no-gutters>
-        <v-col cols="12">
-          <v-btn
-            tile
-            block
-            variant="text"
-            class="text-none"
-            size="48"
-            @click="cancel"
-          >
-            Cancel
-          </v-btn>
-        </v-col>
-      </v-row>
-    </v-toolbar>
+    <div class="visitor-select__footer">
+      <AppButton variant="ghost" @click="cancel">Cancel</AppButton>
+    </div>
   </v-card>
 </template>
 
@@ -69,6 +46,32 @@ function showSelection(item: any) {
   if(item.value === 'walk-in' && prop.mode === 'register') {
     return false ;
   } return true;
-  
+
 }
 </script>
+
+<style scoped>
+/* Same shape as the Add Vehicle prompt: full-width choices, one per row. */
+.visitor-select__body {
+  padding: 20px;
+}
+
+.visitor-select__hint {
+  margin: 0 0 14px;
+  text-align: center;
+  font-size: var(--fs-cell);
+  color: var(--muted);
+}
+
+.visitor-select__option {
+  display: flex;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.visitor-select__footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 0 20px 20px;
+}
+</style>

package/components/VisitorPassKeyQRScanner.vue

@@ -3,26 +3,27 @@
         @after-enter="handleScanVisitorQRCode">
         <v-container class="d-flex justify-center" max-height="90vh">
             <!-- QR code reader container -->
-            <v-card elevation="2" class="d-flex flex-column align-center pa-2 w-100 h-100">
-                <v-toolbar>
-                    <v-card-title class="text-h5"> Scan QR Code </v-card-title>
-                    <v-spacer />
-                    <v-btn color="grey-darken-1" icon="mdi-close" @click="closeDialog()" />
-                </v-toolbar>
-
-                <div id="reader" class="d-flex justify-center align-center w-100 h-100"
-                    style="height: calc(100vh - 64px)">
-                    <!-- The QR code scanner box -->
-                    <!-- This is where the QR code scanner will be displayed -->
+            <v-card class="screen-modal qr-scanner">
+                <div class="qr-scanner__head">
+                    <v-card-title>Scan QR Code</v-card-title>
+                    <AppButton variant="icon" icon="mdi-close" @click="closeDialog()" />
                 </div>
-                <!-- Show Error Messages -->
-                <div v-if="showNotFoundMessage" class="text-error mt-8">
-                    <p>{{ errorMessage }}</p>
+
+                <div class="screen-modal__body qr-scanner__body">
+                    <div id="reader" class="qr-scanner__reader">
+                        <!-- The QR code scanner box -->
+                        <!-- This is where the QR code scanner will be displayed -->
+                    </div>
+                    <!-- Show Error Messages -->
+                    <p v-if="showNotFoundMessage" class="qr-scanner__error">{{ errorMessage }}</p>
+                    <!-- Switch camera button inside the reader box -->
+                    <AppButton
+                        icon="mdi-camera-switch"
+                        class="qr-scanner__switch"
+                        aria-label="Switch camera"
+                        @click="switchCamera()"
+                    />
                 </div>
-                <!-- Switch camera button inside the reader box -->
-                <v-btn color="primary" icon class="mt-4" @click="switchCamera()">
-                    <v-icon icon="mdi-camera-switch" large />
-                </v-btn>
             </v-card>
         </v-container>
     </v-dialog>
@@ -136,3 +137,49 @@ const stopScanner = () => {
     });
 };
 </script>
+
+<style scoped>
+/* The card used to be `w-100` inside the centring container; keep that width
+   or the dialog collapses to the width of the reader box. */
+.qr-scanner {
+    width: 100%;
+}
+
+.qr-scanner__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-right: 12px;
+}
+
+.qr-scanner__body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    padding: 4px 20px 20px;
+}
+
+/* The scanner paints its own video into this box; only the frame is ours. */
+.qr-scanner__reader {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-height: 320px;
+    border: 1px solid var(--border);
+    border-radius: var(--r-inner);
+    background: var(--thead);
+}
+
+.qr-scanner__error {
+    margin: 0;
+    font-size: var(--fs-cell);
+    color: var(--err);
+}
+
+.qr-scanner__switch {
+    width: var(--btn-h);
+    padding: 0;
+}
+</style>

package/components/VisitorSocketPopUp.vue

@@ -90,19 +90,14 @@
     </v-snackbar>
 
     <v-dialog v-model="permanentMessageDialog.modal" max-width="480" persistent>
-      <v-card>
-        <v-card-title class="text-h6">Notice</v-card-title>
-        <v-card-text>{{ permanentMessageDialog.text }}</v-card-text>
-        <v-card-actions>
-          <v-spacer />
-          <v-btn
-            color="primary"
-            variant="elevated"
-            @click="permanentMessageDialog.modal = false"
-          >
-            Close
-          </v-btn>
-        </v-card-actions>
+      <v-card class="screen-modal socket-notice">
+        <v-card-title>Notice</v-card-title>
+        <div class="screen-modal__body socket-notice__body">
+          {{ permanentMessageDialog.text }}
+        </div>
+        <div class="socket-notice__footer">
+          <AppButton @click="permanentMessageDialog.modal = false">Close</AppButton>
+        </div>
       </v-card>
     </v-dialog>
   </div>
@@ -372,3 +367,16 @@ onUnmounted(() => {
 
 
 </script>
+
+<style scoped>
+.socket-notice__body {
+  padding: 4px 20px 0;
+  color: var(--text2);
+}
+
+.socket-notice__footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 16px 20px 20px;
+}
+</style>

package/components/VisitorsReportPreview.vue

@@ -1,22 +1,25 @@
 <template>
-    <v-card height="100%" width="100%" flat class="pa-2 pa-sm-5">
+    <AppCard class="pa-2 pa-sm-5">
         <v-row no-gutters>
             <v-col cols="12">
                 <v-row no-gutters class="d-flex ga-2 justify-space-between align-start mb-3 mb-sm-5 flex-wrap">
 
                     <div class="d-flex flex-column" style="min-width: 0;">
-                        <span class="text-subtitle-1 font-weight-bold" style="word-break: break-word;">Visitor
+                        <span class="screen-card-title" style="word-break: break-word;">Visitor
                             Management - Visitor ({{ items.length }} visitors)</span>
-                        <span style="font-size: clamp(11px, 1.1vw, 13px); word-break: break-word;">Date Range: {{
+                        <span class="report-meta" style="word-break: break-word;">Date Range: {{
                             formatDateDDMMYYYY(dateFrom) }} - {{ formatDateDDMMYYYY(dateTo) ?? "" }}</span>
-                        <span class="text-subtitle-1" style="word-break: break-word;">Site Name: {{ activeSiteName
+                        <span class="report-meta" style="word-break: break-word;">Site Name: {{ activeSiteName
                         }}</span>
                     </div>
 
                 </v-row>
-                <div style="overflow-x: auto; max-width: 100%;">
+                <!-- `text-black` forced every cell AND the empty-state line to
+                     literal black, which on the dark theme's card measured
+                     1.26:1. The table takes the theme's own ink now. -->
+                <div class="table-card" style="overflow-x: auto; max-width: 100%;">
                     <v-data-table :headers="headers" :items="items" show-header :items-per-page="100"
-                        hide-default-footer class="text-black" no-data-text="No entries to display">
+                        hide-default-footer no-data-text="No entries to display">
 
                         <template v-slot:item.typeCompany="{ item }">
                             <span class="d-flex align-center ga-2" style="flex-wrap: wrap;">
@@ -77,13 +80,13 @@
                         <template v-slot:item.checkInOutImage="{ item }">
                             <div class="d-flex flex-column ga-2">
                                 <div v-if="item?.snapshotEntryImage" class="d-flex flex-column">
-                                    <span class="text-caption font-weight-bold text-blue-darken-1">Check-In</span>
+                                    <span class="snapshot-label snapshot-label--in">Check-In</span>
                                     <v-img :src="getFileUrlAnpr(`${siteId}/${item.snapshotEntryImage}`)"
                                         style="max-width: clamp(60px, 10vw, 100px); max-height: clamp(60px, 10vw, 100px);"
                                         class="border" />
                                 </div>
                                 <div v-if="item?.snapshotExitImage" class="d-flex flex-column">
-                                    <span class="text-caption font-weight-bold text-red-darken-1">Check-Out</span>
+                                    <span class="snapshot-label snapshot-label--out">Check-Out</span>
                                     <v-img :src="getFileUrlAnpr(`${siteId}/${item.snapshotExitImage}`)"
                                         style="max-width: clamp(60px, 10vw, 100px); max-height: clamp(60px, 10vw, 100px);"
                                         class="border" />
@@ -101,7 +104,7 @@
             </v-col>
 
         </v-row>
-    </v-card>
+    </AppCard>
 </template>
 
 <script setup lang="ts">
@@ -311,44 +314,56 @@ onMounted(() => {
     box-sizing: border-box;
 }
 
-:deep(.v-card) {
-    overflow-x: auto;
+/* The handoff names no type for a report's meta lines or a snapshot caption,
+   so both take the design's own secondary sizes. The captions were
+   `text-blue-darken-1` / `text-red-darken-1` - fixed Vuetify hues that do not
+   follow the theme. */
+.report-meta {
+    font-family: var(--font-sans);
+    font-size: var(--fs-breadcrumb);
+    color: var(--text2);
 }
 
-:deep(.v-data-table-header__content) {
-    background-color: #1976d2 !important;
-    color: white !important;
-    font-weight: bold;
+.snapshot-label {
+    font-family: var(--font-sans);
+    font-size: var(--fs-chip);
+    font-weight: var(--fw-chip);
 }
 
-:deep(.v-data-table thead tr th) {
-    background-color: #1976d2 !important;
-    color: white !important;
-    border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
-    font-size: clamp(11px, 1.2vw, 14px) !important;
-    padding: clamp(8px, 1vw, 12px) !important;
-    word-break: break-word;
+.snapshot-label--in {
+    color: var(--info);
 }
 
-:deep(.v-data-table thead tr th:last-child) {
-    border-right: none !important;
+.snapshot-label--out {
+    /* Was `var(--error)`, which is not a token here - the name is `--err`. An
+       undefined custom property invalidates the declaration silently, so the
+       label inherited instead of turning red. */
+    color: var(--err);
+}
+
+:deep(.v-card) {
+    overflow-x: auto;
 }
 
+/* The header row was a fixed `#1976d2` fill with white labels and the cell
+   rules were a fixed `#e0e0e0`, none of which follows the theme and none of
+   which is in the handoff - the design's table head is 11px/800 uppercase in
+   `--muted` on `--thead`. Deleted so the shared `.table-card` rule applies;
+   only the column rule this report actually needs is kept, on `--border`. */
+:deep(.v-data-table thead tr th),
 :deep(.v-data-table tbody tr td) {
-    border-right: 1px solid #e0e0e0 !important;
-    font-size: clamp(10px, 1.1vw, 13px) !important;
-    padding: clamp(6px, 0.8vw, 10px) !important;
+    border-right: 1px solid var(--border) !important;
     word-break: break-word;
-    word-wrap: break-word;
     overflow-wrap: break-word;
 }
 
+:deep(.v-data-table thead tr th:last-child),
 :deep(.v-data-table tbody tr td:last-child) {
     border-right: none !important;
 }
 
 :deep(.v-data-table tbody tr:last-child td) {
-    border-bottom: 1px solid #e0e0e0 !important;
+    border-bottom: 1px solid var(--border) !important;
 }
 
 :deep(.v-img) {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.118",
+  "version": "3.2.2-staging.121",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {

package/tools/render-harness/baselines.json

@@ -18,5 +18,100 @@
     "els": 3,
     "textChars": 2,
     "recordedFrom": "0642279"
+  },
+  "AccessCardAssignToUnitForm": {
+    "els": 177,
+    "textChars": 131,
+    "recordedFrom": "178ebf0"
+  },
+  "AccessCardReplaceForm": {
+    "els": 68,
+    "textChars": 83,
+    "recordedFrom": "178ebf0"
+  },
+  "AddEqupmentForm": {
+    "els": 90,
+    "textChars": 99,
+    "recordedFrom": "178ebf0"
+  },
+  "BuildingForm": {
+    "els": 126,
+    "textChars": 69,
+    "recordedFrom": "178ebf0"
+  },
+  "BulletinBoardForm": {
+    "els": 172,
+    "textChars": 165,
+    "recordedFrom": "178ebf0"
+  },
+  "CameraForm": {
+    "els": 127,
+    "textChars": 80,
+    "recordedFrom": "178ebf0"
+  },
+  "DocumentForm": {
+    "els": 52,
+    "textChars": 57,
+    "recordedFrom": "178ebf0"
+  },
+  "InvitationClientForm": {
+    "els": 101,
+    "textChars": 47,
+    "recordedFrom": "178ebf0"
+  },
+  "InvitationForm": {
+    "els": 86,
+    "textChars": 43,
+    "recordedFrom": "178ebf0"
+  },
+  "ServiceProviderFormCreate": {
+    "els": 51,
+    "textChars": 38,
+    "recordedFrom": "178ebf0"
+  },
+  "AcceptDialog": {
+    "els": 24,
+    "textChars": 106,
+    "recordedFrom": "178ebf0"
+  },
+  "Card/DeleteConfirmation": {
+    "els": 21,
+    "textChars": 129,
+    "recordedFrom": "178ebf0"
+  },
+  "Dialog/DeleteConfirmation": {
+    "els": 21,
+    "textChars": 129,
+    "recordedFrom": "178ebf0"
+  },
+  "HidAccessLogDashboard": {
+    "els": 172,
+    "textChars": 437,
+    "recordedFrom": "178ebf0"
+  },
+  "HidIntercomManagement": {
+    "els": 148,
+    "textChars": 167,
+    "recordedFrom": "178ebf0"
+  },
+  "HidUserEnrollment": {
+    "els": 142,
+    "textChars": 287,
+    "recordedFrom": "178ebf0"
+  },
+  "HidReaderManagement": {
+    "els": 112,
+    "textChars": 377,
+    "recordedFrom": "178ebf0"
+  },
+  "HidQrCodeConfiguration": {
+    "els": 106,
+    "textChars": 453,
+    "recordedFrom": "178ebf0"
+  },
+  "HidServiceSettingsPanel": {
+    "els": 18,
+    "textChars": 164,
+    "recordedFrom": "178ebf0"
   }
 }

package/tools/render-harness/harness-init.ps1

@@ -78,6 +78,10 @@ if (-not (Test-Path "$fork\vite.config.mjs")) {
 # The hardened runner lives in the repo, next to this script, so a fork always
 # gets the CURRENT one rather than whatever the canonical harness was carrying.
 Copy-Item (Join-Path $PSScriptRoot "render-check.mjs") -Destination $fork -Force
+# `probe.mjs` is imported by the runner, so a fork without it dies on
+# ERR_MODULE_NOT_FOUND before it measures anything. It was missing from this
+# list, which every fork made before now had to work around by hand.
+Copy-Item (Join-Path $PSScriptRoot "probe.mjs") -Destination $fork -Force
 Copy-Item (Join-Path $PSScriptRoot "baselines.json") -Destination $fork -Force -ErrorAction SilentlyContinue
 
 # A junctioned `node_modules` SHARES `node_modules/.vite` with the harness it

package/utils/status.test.ts

@@ -62,6 +62,39 @@ test("the product's own status words keep the tone the screens already gave them
   }
 });
 
+/**
+ * HID enrolment. These two are the whole point of the Status column on
+ * `HidUserEnrollment` - if they were left unlisted they would BOTH be neutral
+ * and the column would stop distinguishing anything, so they are pinned.
+ */
+test("Mapped and Unmapped keep the tones the enrolment screen already gave them", () => {
+  assert.equal(statusTone("Mapped"), "ok");
+  assert.equal(statusTone("Unmapped"), "warn");
+});
+
+/**
+ * HID intercom SIP state. "Disabled" and "Not connected" must stay NEUTRAL -
+ * painting an intentionally-off intercom red would read as a fault.
+ */
+/**
+ * HID access authorization, landing on `staging` in b0667a7. Pinned before that
+ * merge so the words cannot arrive and quietly render neutral - the difference
+ * between a granted and a denied door is the whole point of the column.
+ */
+test("HID authorization states are known to the shared map before b0667a7 merges", () => {
+  assert.equal(statusTone("Authorized"), "ok");
+  assert.equal(statusTone("Not Authorized"), "err");
+  assert.equal(statusTone("Unknown"), "warn");
+});
+
+test("intercom SIP states keep the tones the intercom screen already gave them", () => {
+  assert.equal(statusTone("Connected"), "ok");
+  assert.equal(statusTone("Connecting"), "warn");
+  assert.equal(statusTone("Not connected"), "neutral");
+  assert.equal(statusTone("Disabled"), "neutral");
+  assert.equal(statusTone("Failed"), "err");
+});
+
 /**
  * The one place the handoff and the old per-screen colour disagree: `Open` was
  * grey on the cleaning schedules and the design names it `ok`. Pinned so the

package/utils/status.ts

@@ -70,6 +70,42 @@ const TONES: Record<string, TStatusTone> = {
   expired: "neutral", // was `grey`
 
   "awaiting approval": "warn", // a waiting state, like Pending
+
+  /**
+   * HID enrolment: is this reader identity tied to a real person record yet?
+   * Same rule as the Phase 4 block above - not a new opinion, but the tone
+   * `HidUserEnrollment` already painted these two words, moved into the one
+   * list. Left unlisted they would BOTH come out neutral, which would erase
+   * the only distinction the column exists to draw.
+   */
+  mapped: "ok", // was `status-success`, #1b7f3a on #dff7e7
+  unmapped: "warn", // was `status-warning`, #9a6700 on #fff0cc
+
+  /**
+   * HID intercom SIP state, from `HidIntercomManagement`'s own
+   * `getStatusClass`. Same rule again: the tone the screen already gave the
+   * word, moved into the one list. "Disabled" and "Not connected" are NOT
+   * failures - the operator turned SIP off, or never set it up - so they stay
+   * neutral, which is what `status-muted` painted them.
+   */
+  /**
+   * HID access authorization. These arrive with `b0667a7` on `staging`
+   * ("Call the Authorized status API from Amico via Access Logs"), which
+   * replaces the Access Logs' Mapped/Unmapped column with these three words.
+   * Listed here AHEAD of that merge so the shared chip already knows them -
+   * unlisted they would all come out neutral, silently erasing the difference
+   * between a granted and a denied door. Tones are that commit's own:
+   * `mapped-chip` green, `unmapped-chip` red, `unknown-chip` amber.
+   */
+  authorized: "ok",
+  "not authorized": "err",
+  unknown: "warn",
+
+  connected: "ok", // was `status-success`
+  connecting: "warn", // was `status-warning`, the fall-through case
+  "not connected": "neutral", // was `status-muted`
+  disabled: "neutral", // was `status-muted`
+  failed: "err", // was `status-error`
 };
 
 /**