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

package/components/VisitorDataFromScannedQRCodeForm.vue

@@ -1,24 +1,25 @@
 <template>
-  <v-card width="100%" :loading="processing">
-    <v-toolbar>
-      <v-row
-        no-gutters
-        class="fill-height px-6 d-flex justify-space-between align-center"
-        align="center"
-      >
-        <span class="font-weight-bold text-h5 text-capitalize">
-          Visitor Information
-        </span>
-        <ButtonClose @click="emit('close')" />
-      </v-row>
-    </v-toolbar>
-    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-3">
+  <v-card width="100%" class="screen-modal visitor-scan" :loading="processing">
+    <div class="visitor-scan__head">
+      <v-card-title>Visitor Information</v-card-title>
+      <AppButton
+        variant="icon"
+        icon="mdi-close"
+        aria-label="Close"
+        @click="emit('close')"
+      />
+    </div>
+    <div class="screen-modal__body visitor-scan__body">
       <div class="w-100 d-flex justify-space-between ga-2">
         <!-- <span v-if="withStep2 || withStep3" class="text-subtitle-2 font-weight-bold" style="text-wrap: nowrap">Step
           <span class="text-primary-button">{{ contractorStep }}</span>/{{ withStep3 ? 3 : withStep2 ? 2 : 1 }}</span> -->
       </div>
       <!-- <v-form ref="formRef" v-model="validForm" :disabled="processing" @click="errorMessage = ''"> -->
-      <v-row no-gutters class="pt-4">
+      <!-- `.filter-field` is the design's input on its own (40px, 10px radius,
+           13.5px). It is a DESCENDANT selector, so one class on the row gives
+           it to every field here - including the composed `Input/*` controls,
+           which are shared with other screens and are not edited. -->
+      <v-row no-gutters class="pt-4 filter-field">
         <v-col cols="12">
           <InputLabel class="text-capitalize" title="Full Name" />
           <v-text-field
@@ -134,22 +135,16 @@
         </v-col>
 
         <v-col v-else cols="12">
-          <v-card elevation="4" height="100%" width="100%">
-            <v-col cols="12" class="d-flex justify-center pb-0">
-              <span
-                class="text-h6 font-weight-bold d-flex text-center text-success"
-              >
-                {{
-                  visitorInfo.checkIn
-                    ? standardFormatDateTime(visitorInfo.checkIn)
-                    : "N/A"
-                }}
-              </span>
-            </v-col>
-            <v-col cols="12" class="d-flex justify-center">
-              Actual Check In
-            </v-col>
-          </v-card>
+          <AppCard class="visitor-scan__checkin">
+            <span class="visitor-scan__checkin-time">
+              {{
+                visitorInfo.checkIn
+                  ? standardFormatDateTime(visitorInfo.checkIn)
+                  : "N/A"
+              }}
+            </span>
+            <span class="visitor-scan__checkin-label">Actual Check In</span>
+          </AppCard>
         </v-col>
 
         <!-- <v-col cols="12" class="mt-4">
@@ -194,41 +189,31 @@
         </v-col> -->
       </v-row>
       <!-- </v-form> -->
-    </v-card-text>
+    </div>
 
-    <v-toolbar density="compact">
-      <v-row no-gutters>
-        <v-col cols="6">
-          <v-btn text="Close" block size="48" tile @click="emit('close')" />
-        </v-col>
-        <v-col cols="6">
-          <v-btn
-            v-if="!visitorInfo.checkIn && !visitorInfo.checkOut"
-            block
-            text="Check In"
-            variant="flat"
-            color="success"
-            size="48"
-            tile
-            :disabled="processing"
-            @click="emit('check-in-out', 'checkIn', visitorInfo)"
-            :loading="processing"
-          />
-          <v-btn
-            v-if="visitorInfo.checkIn && !visitorInfo.checkOut"
-            block
-            text="Confirm Check Out"
-            variant="flat"
-            color="error"
-            size="48"
-            tile
-            :disabled="processing"
-            @click="emit('check-in-out', 'checkOut', visitorInfo)"
-            :loading="processing"
-          />
-        </v-col>
-      </v-row>
-    </v-toolbar>
+    <!--
+      Check In and Confirm Check Out are mutually exclusive - only ever one of
+      them is on the glass - so both are the screen's single primary action.
+      The handoff draws no green/red button, and inventing one only to fail
+      contrast is the trade that was already made and reverted once.
+    -->
+    <div class="visitor-scan__footer">
+      <AppButton variant="ghost" @click="emit('close')">Close</AppButton>
+      <AppButton
+        v-if="!visitorInfo.checkIn && !visitorInfo.checkOut"
+        :disabled="processing"
+        @click="emit('check-in-out', 'checkIn', visitorInfo)"
+      >
+        Check In
+      </AppButton>
+      <AppButton
+        v-if="visitorInfo.checkIn && !visitorInfo.checkOut"
+        :disabled="processing"
+        @click="emit('check-in-out', 'checkOut', visitorInfo)"
+      >
+        Confirm Check Out
+      </AppButton>
+    </div>
   </v-card>
 </template>
 <script setup lang="ts">
@@ -315,3 +300,43 @@ const location = computed({
   set: () => {}, // readonly, do nothing on set
 });
 </script>
+
+<style scoped>
+.visitor-scan__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: 12px;
+}
+
+.visitor-scan__body {
+  padding: 4px 20px 0;
+}
+
+.visitor-scan__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px 20px 20px;
+}
+
+/* The check-in stamp, on the card primitive instead of a 4dp Vuetify sheet. */
+.visitor-scan__checkin {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 16px;
+}
+
+.visitor-scan__checkin-time {
+  font-size: 18px;
+  font-weight: 800;
+  color: var(--ok);
+}
+
+.visitor-scan__checkin-label {
+  font-size: var(--fs-cell);
+  color: var(--text2);
+}
+</style>

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,53 @@ 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 {
+    color: var(--error);
+}
+
+: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.116",
+  "version": "3.2.2-staging.120",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {