@7365admin1/layer-common 3.2.7 → 3.2.8-staging.201

package/components/EntryPassInformation.vue

@@ -60,8 +60,8 @@
         </v-alert>
         <template v-else>
           <!-- Generating / loading state -->
-          <div v-if="generating || cardsLoading" class="d-flex align-center ga-2 mt-3 text-caption text-grey-darken-1">
-            <v-progress-circular size="14" width="2" indeterminate color="grey" />
+          <div v-if="generating || cardsLoading" class="d-flex align-center ga-2 mt-3 text-caption text-fontgray">
+            <v-progress-circular size="14" width="2" indeterminate />
             <span>{{ generating ? 'Generating QR passes...' : 'Checking availability...' }}</span>
           </div>
           <!-- 0 available after all loading -->
@@ -79,7 +79,7 @@
           <template v-else>
             <div class="d-flex align-center justify-space-between mt-3">
               <InputLabel title="Quantity" />
-              <span v-if="availableCount !== null" class="text-caption text-grey">
+              <span v-if="availableCount !== null" class="text-caption text-fontgray">
                 {{ availableCount }} available
               </span>
             </div>
@@ -133,6 +133,7 @@
               :color="isBarcodeScanningActive ? 'success' : 'primary'"
               variant="outlined"
               block
+              class="text-none"
               prepend-icon="mdi-barcode-scan"
               @click="toggleBarcodeScanning"
             >
@@ -145,6 +146,7 @@
               variant="outlined"
               color="primary"
               block
+              class="text-none"
               prepend-icon="mdi-camera"
               @click="openCameraDialog"
             >
@@ -166,15 +168,35 @@
       </template>
 
       <template v-if="passType === 'HID_QR'">
+        <v-card variant="tonal" color="primary" class="mt-3 pa-3" rounded="lg">
+          <div class="d-flex align-center ga-3">
+            <v-icon icon="mdi-door-open" size="28" />
+            <div>
+              <div class="text-caption text-medium-emphasis">Access Reader</div>
+              <div class="text-subtitle-2 font-weight-bold">{{ hidReaderName || "Reader not configured" }}</div>
+              <div class="text-caption mt-1">Access Portal: {{ hidPortalName || "Portal not configured" }}</div>
+            </div>
+          </div>
+        </v-card>
         <v-alert
-          v-if="!hidQrPrinterConfigured"
+          v-if="!hidPortalName"
           type="warning"
           variant="tonal"
           density="compact"
           class="mt-3"
-          icon="mdi-printer-alert"
+          icon="mdi-alert"
         >
-          No printer is configured on HID settings. QR Pass may not print.
+          Reconnect this HID reader and select a portal before generating a visitor QR code.
+        </v-alert>
+        <v-alert
+          v-else-if="!hidQrPrinterConfigured"
+          type="info"
+          variant="tonal"
+          density="compact"
+          class="mt-3"
+          icon="mdi-qrcode"
+        >
+          HID QR Code will be generated and shown on screen. You can download it after continuing.
         </v-alert>
         <v-alert
           v-else
@@ -184,7 +206,7 @@
           class="mt-3"
           icon="mdi-qrcode-scan"
         >
-          HID QR Code will be generated and printed when you continue.
+          HID QR Code will be generated and shown on screen. Printing is also available.
         </v-alert>
       </template>
     </template>
@@ -204,11 +226,11 @@
       @after-leave="stopCamera"
     >
       <v-container class="d-flex justify-center" style="max-height: 90vh">
-        <v-card elevation="2" class="d-flex flex-column align-center pa-2 w-100">
+        <v-card class="screen-modal d-flex flex-column align-center pa-2 w-100">
           <v-toolbar color="transparent">
-            <v-card-title class="text-h5">Scan Card</v-card-title>
+            <v-card-title>Scan Card</v-card-title>
             <v-spacer />
-            <v-btn icon="mdi-close" color="grey-darken-1" @click="closeCameraDialog" />
+            <v-btn icon="mdi-close" class="screen-modal__close" @click="closeCameraDialog" />
           </v-toolbar>
 
           <div class="position-relative w-100" style="aspect-ratio: 4/3; background: #000">
@@ -283,6 +305,14 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  hidReaderName: {
+    type: String,
+    default: "",
+  },
+  hidPortalName: {
+    type: String,
+    default: "",
+  },
   excludedCardIds: {
     type: Array as PropType<string[]>,
     default: () => [],

package/components/EntryPassMain.vue

@@ -5,28 +5,41 @@
     :height="'200px'"
     v-if="loading"
   />
-  <v-row no-gutters v-if="!loading">
-    <v-col cols="12" elevation="3" class="border">
-      <v-tabs v-model="activeTab" color="primary" class="px-2">
-        <v-tab value="general">
-          <v-icon start>mdi-cog-outline</v-icon>
-          General
-        </v-tab>
-        <v-tab value="qrcode">
-          <v-icon start>mdi-qrcode</v-icon>
-          QR Code
-        </v-tab>
-        <v-tab value="printer">
-          <v-icon start>mdi-printer</v-icon>
-          Printer
-        </v-tab>
-        <v-tab value="entrypass">
-          <v-icon start>mdi-link-variant</v-icon>
-          Entrypass
-        </v-tab>
-      </v-tabs>
-
-      <v-divider />
+  <div v-if="!loading">
+    <!--
+      THE DESIGN'S CARD + TAB ROW - AND DELIBERATELY NO `PageHeader`.
+
+      This screen owns no table; it is a settings screen of switches and fields,
+      so it takes `AppCard` + `CardToolbar`'s tabs row and no pager, count or
+      refresh, because it has never had any.
+
+      It gets NO page title, unlike the other screens in this pass: its only
+      caller mounts it INSIDE a `v-expansion-panel` on property-management's
+      Settings page whose panel header already reads "Entry Pass". A
+      `PageHeader` here would print that title twice.
+
+      The same four tabs switch the same `v-window` on the same `activeTab`,
+      keeping their icons; every switch, field, button and save handler is
+      untouched.
+    -->
+    <AppCard class="screen-card">
+      <CardToolbar>
+        <template #tabs>
+          <button
+            v-for="tab in entryPassTabs"
+            :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"
+          >
+            <v-icon start size="16">{{ tab.icon }}</v-icon>
+            {{ tab.label }}
+          </button>
+        </template>
+      </CardToolbar>
 
       <v-window v-model="activeTab">
         <!-- ─── Tab 1: General ─────────────────────────────────── -->
@@ -38,7 +51,7 @@
               <div class="d-flex mt-3 pb-5 pr-5">
                 <p class="mr-6 font-weight-medium flex-grow-1">
                   NFC / QR Code Pass
-                  <span class="d-block text-caption text-grey-darken-1 mt-1">
+                  <span class="d-block text-caption screen-hint mt-1">
                     NFC Card Pass uses Near Field Communication (NFC) technology
                     to enable secure and convenient entry within ~4 cm proximity.
                   </span>
@@ -59,7 +72,7 @@
               <div class="mt-5 pb-5">
                 <p class="font-weight-medium mb-1">
                   Access Door / Lift
-                  <span class="d-block text-caption text-grey-darken-1 mt-1">
+                  <span class="d-block text-caption screen-hint mt-1">
                     Choose the access method(s) for door and lift control.
                     At least one method must be enabled.
                   </span>
@@ -190,7 +203,7 @@
               <div class="d-flex mt-3 pb-5">
                 <p class="font-weight-medium flex-grow-1">
                   Upload Access Cards Template
-                  <span class="d-block text-caption text-grey-darken-1 mt-1">
+                  <span class="d-block text-caption screen-hint mt-1">
                     <a
                       v-if="currentEntryPassSettings.template?.id"
                       href="#"
@@ -379,7 +392,7 @@
           </v-row>
         </v-window-item>
       </v-window>
-    </v-col>
+    </AppCard>
 
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
 
@@ -388,7 +401,7 @@
       :header="currentEntryPassSettings.qrCodeTemplateHeader"
       :sub-text="currentEntryPassSettings.qrCodeTemplateHeaderSubText"
     />
-  </v-row>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -400,6 +413,15 @@ const prop = defineProps({
 
 const activeTab = ref("general");
 
+/** The same four tabs, in the same order, moved out of the template so the
+    design's tab row can `v-for` them. Values unchanged - they key `v-window`. */
+const entryPassTabs = [
+  { value: "general", label: "General", icon: "mdi-cog-outline" },
+  { value: "qrcode", label: "QR Code", icon: "mdi-qrcode" },
+  { value: "printer", label: "Printer", icon: "mdi-printer" },
+  { value: "entrypass", label: "Entrypass", icon: "mdi-link-variant" },
+];
+
 const currentEntryPassSettings = ref<Record<string, any>>({
   _id: "",
   site: "",

package/components/EquipmentItemMain.vue

@@ -2,7 +2,7 @@
   <v-row no-gutters align="center" justify="center">
     <v-col cols="12" lg="12">
       <TableMain
-        :title="`${siteName} Units`"
+        :title="`${siteName} Equipment Items`"
         :items="items"
         :headers="headers"
         :loading="loading"
@@ -20,10 +20,8 @@
           <v-row no-gutters align="center" class="w-100">
             <v-col cols="auto" v-if="canCreateEquipmentItem">
               <v-btn
-                class="text-none"
-                rounded="pill"
-                variant="tonal"
-                size="large"
+                class="text-none screen-btn-primary"
+                variant="flat"
                 @click="openEquipmentItemDialog()"
               >
                 Checkout Item
@@ -32,7 +30,7 @@
 
             <v-spacer />
 
-            <v-col cols="auto">
+            <v-col cols="auto" class="filter-field">
               <v-text-field
                 v-model="searchInput"
                 density="compact"
@@ -200,22 +198,28 @@
   </v-dialog>
 
   <!-- Main Equipment Item Dialog -->
+  <!--
+    All three dialogs were hand-drawn: a 20px/700 title bar, a divider, and a
+    `v-card-actions` footer of two 56px block buttons with square corners, the
+    confirm one on `color="black"` - not a token, so it painted a light-theme
+    fill on the dark theme. The shared `.screen-modal` shape now. Same fields,
+    same labels, same handlers, same busy states.
+  -->
   <v-dialog v-model="dialogEquipmentItem" max-width="540" persistent>
-    <v-card>
-      <v-card-title class="d-flex align-center pa-4">
-        <span class="text-h6 font-weight-bold">Equipment Item</span>
+    <v-card class="screen-modal">
+      <v-card-title class="d-flex align-center">
+        Equipment Item
         <v-spacer />
         <v-btn
           icon="mdi-close"
           variant="text"
-          size="small"
+          class="screen-modal__close"
+          aria-label="Close"
           @click="dialogEquipmentItem = false"
         />
       </v-card-title>
 
-      <v-divider />
-
-      <v-card-text class="pa-6">
+      <v-card-text class="screen-modal__body">
         <v-form ref="equipmentItemFormRef">
           <!-- Add Equipment Section -->
           <v-row no-gutters class="mb-4">
@@ -376,49 +380,40 @@
         </v-form>
       </v-card-text>
 
-      <v-divider />
-
-      <v-card-actions class="pa-0">
-        <v-row no-gutters>
-          <v-col cols="6">
-            <v-btn
-              block
-              variant="text"
-              size="large"
-              height="56"
-              class="text-none font-weight-medium rounded-0"
-              @click="dialogEquipmentItem = false"
-            >
-              Cancel
-            </v-btn>
-          </v-col>
-          <v-col cols="6">
-            <v-btn
-              block
-              variant="flat"
-              color="black"
-              size="large"
-              height="56"
-              class="text-none font-weight-bold rounded-0"
-              :loading="submitting"
-              @click="_equipmentItem()"
-            >
-              Checkout Item
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-card-actions>
+      <div class="screen-modal__footer">
+        <v-btn
+          class="screen-btn-ghost"
+          variant="outlined"
+          :disabled="submitting"
+          @click="dialogEquipmentItem = false"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          class="screen-btn-primary"
+          variant="flat"
+          :loading="submitting"
+          @click="_equipmentItem()"
+        >
+          Checkout Item
+        </v-btn>
+      </div>
     </v-card>
   </v-dialog>
 
   <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
 
   <v-dialog v-model="dialogPhotoForItem" max-width="720" persistent>
-    <v-card rounded="lg">
-      <v-card-title class="d-flex align-center pa-4">
+    <v-card class="screen-modal">
+      <v-card-title class="d-flex align-center">
         <div>
-          <div class="text-h6 font-weight-bold">Item Photos</div>
-          <div class="text-caption text-medium-emphasis">
+          Item Photos
+          <!--
+            The handoff draws no sub-line under a modal title. `--muted` at
+            12px, the figure batch I's `AttachmentsViewer` settled on, rather
+            than a third number.
+          -->
+          <div class="eqi-modal-sub">
             {{ equipmentItems[activePhotoIndex ?? 0]?.supplyName || "Item" }}
           </div>
         </div>
@@ -428,15 +423,14 @@
         <v-btn
           icon="mdi-close"
           variant="text"
-          size="small"
+          class="screen-modal__close"
+          aria-label="Close"
           @click="dialogPhotoForItem = false"
         />
       </v-card-title>
 
-      <v-divider />
-
       <!-- Body -->
-      <v-card-text class="pa-6" v-if="activePhotoIndex !== null">
+      <v-card-text class="screen-modal__body" v-if="activePhotoIndex !== null">
         <PhotoUpload
           title="Add / Take Photos"
           v-model="currentPhotos"
@@ -445,63 +439,42 @@
         />
       </v-card-text>
 
-      <v-divider />
-
       <!-- Footer -->
-      <v-card-actions class="pa-0">
-        <v-row no-gutters class="w-100">
-          <v-col cols="6">
-            <v-btn
-              block
-              variant="text"
-              size="large"
-              height="56"
-              class="text-none font-weight-medium rounded-0"
-              @click="dialogPhotoForItem = false"
-            >
-              Cancel
-            </v-btn>
-          </v-col>
-
-          <v-col cols="6">
-            <v-btn
-              block
-              variant="flat"
-              color="black"
-              size="large"
-              height="56"
-              class="text-none font-weight-bold rounded-0"
-              @click="dialogPhotoForItem = false"
-            >
-              Done
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-card-actions>
+      <div class="screen-modal__footer">
+        <v-btn
+          class="screen-btn-ghost"
+          variant="outlined"
+          @click="dialogPhotoForItem = false"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          class="screen-btn-primary"
+          variant="flat"
+          @click="dialogPhotoForItem = false"
+        >
+          Done
+        </v-btn>
+      </div>
     </v-card>
   </v-dialog>
 
   <v-dialog v-model="showAttachmentDialog" max-width="720" persistent>
-    <v-card rounded="lg">
-      <v-card-title class="d-flex align-center pa-4">
-        <div>
-          <div class="text-h6 font-weight-bold">Attachment</div>
-        </div>
-
+    <v-card class="screen-modal">
+      <v-card-title class="d-flex align-center">
+        Attachment
         <v-spacer />
-
         <v-btn
           icon="mdi-close"
           variant="text"
-          size="small"
+          class="screen-modal__close"
+          aria-label="Close"
           @click="(showAttachmentDialog = false), (attachmentUrl = '')"
         />
       </v-card-title>
 
-      <v-divider />
-
       <!-- Body -->
-      <v-card-text class="pa-6">
+      <v-card-text class="screen-modal__body">
         <v-img :src="attachmentUrl" contain />
       </v-card-text>
     </v-card>
@@ -819,4 +792,18 @@ const currentPhotoIds = computed({
 });
 </script>
 
-<style scoped></style>
+<style scoped>
+/*
+  The sub-line under the "Item Photos" title. The handoff draws no such line,
+  so it takes the figure already settled on for one: `--muted` at 12px.
+  Scoped to `.v-card-title` because Vuetify's own title rule would otherwise
+  hand it the 20px it gives everything inside.
+*/
+.screen-modal .v-card-title .eqi-modal-sub {
+  font-family: var(--font-sans);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.4;
+  color: var(--muted);
+}
+</style>