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

package/components/AccessCardPreviewDialog.vue

@@ -9,16 +9,16 @@
 
   <!-- Assign to Person Dialog -->
   <v-dialog :model-value="showAssignForm" width="420" persistent>
-    <v-card width="100%">
-      <v-toolbar density="compact" color="surface">
+    <v-card width="100%" class="screen-modal">
+      <v-toolbar density="compact" class="screen-dialog-bar">
         <v-row no-gutters class="fill-height px-4" align="center">
           <span class="font-weight-bold">Assign Card to Person</span>
         </v-row>
       </v-toolbar>
 
       <v-card-text class="pa-4">
-        <div class="text-caption text-grey mb-4">
-          Card: <strong class="text-body-2 text-black">{{ selectedCardInUnit?.cardNo }}</strong>
+        <div class="text-caption text-fontgray mb-4">
+          Card: <strong class="text-body-2">{{ selectedCardInUnit?.cardNo }}</strong>
         </div>
 
         <!-- Person Type Filter -->
@@ -38,9 +38,7 @@
         </v-btn-toggle> -->
 
         <!-- Person Selector -->
-        <div class="text-caption font-weight-bold mb-1 text-uppercase text-grey-darken-1">
-          Person <span class="text-error">*</span>
-        </div>
+        <InputLabel title="Person" required class="mb-1" />
         <v-select
           v-model="assignPerson"
           :items="filteredPeopleItems"
@@ -59,7 +57,7 @@
           </template>
           <template #selection="{ item }">
             <span>{{ item.raw.name }}</span>
-            <v-chip size="x-small" class="ml-2" color="grey" variant="tonal">
+            <v-chip size="x-small" class="ml-2" variant="tonal">
               {{ personTypeLabel(item.raw) }}
             </v-chip>
           </template>
@@ -67,41 +65,30 @@
         <p v-if="assignError" class="text-error text-caption mt-2">{{ assignError }}</p>
       </v-card-text>
 
-      <v-toolbar density="compact">
-        <v-row no-gutters>
-          <v-col cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="text"
-              class="text-none"
-              height="48"
-              @click="cancelAssign"
-            >
-              Cancel
-            </v-btn>
-          </v-col>
-          <v-col cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="flat"
-              color="black"
-              class="text-none"
-              height="48"
-              :disabled="!assignPerson || assignLoading"
-              :loading="assignLoading"
-              @click="confirmAssign"
-            >
-              Assign
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-toolbar>
+      <v-card-actions class="screen-modal__footer">
+        <v-btn
+          variant="flat"
+          class="text-none screen-btn-ghost"
+          @click="cancelAssign"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          variant="flat"
+          class="text-none screen-btn-primary"
+          :disabled="!assignPerson || assignLoading"
+          :loading="assignLoading"
+          @click="confirmAssign"
+        >
+          Assign
+        </v-btn>
+      </v-card-actions>
     </v-card>
   </v-dialog>
 
   <v-dialog :model-value="modelValue" width="450" persistent>
-    <v-card width="100%">
-      <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0">
+    <v-card width="100%" class="screen-modal">
+      <v-card-text class="screen-modal__body pb-0">
         <v-row no-gutters class="mb-4">
           <v-col cols="12">
             <strong>Building:</strong> {{ unit?.block?.name ?? "N/A" }}
@@ -130,7 +117,7 @@
                 {{ card.cardNo }}
               </v-chip>
             </div>
-            <span v-else class="text-caption text-grey ml-1">None</span>
+            <span v-else class="text-caption text-fontgray ml-1">None</span>
           </v-col>
 
           <!-- Damage Physical -->
@@ -142,7 +129,7 @@
                 :key="card._id"
                 size="small"
                 class="mr-1 mb-1"
-                color="deep-orange"
+                color="warning"
                 :variant="selectedCardInUnit?._id === card._id ? 'flat' : 'tonal'"
                 style="cursor: pointer"
                 @click="toggleCard(card)"
@@ -150,7 +137,7 @@
                 {{ card.cardNo }}
               </v-chip>
             </div>
-            <span v-else class="text-caption text-grey ml-1">None</span>
+            <span v-else class="text-caption text-fontgray ml-1">None</span>
           </v-col>
 
           <!-- Available Non-Physical -->
@@ -170,7 +157,7 @@
                 {{ card.cardNo }}
               </v-chip>
             </div>
-            <span v-else class="text-caption text-grey ml-1">None</span>
+            <span v-else class="text-caption text-fontgray ml-1">None</span>
           </v-col>
 
           <!-- Assigned Physical -->
@@ -190,7 +177,7 @@
                 {{ card.cardNo }}
               </v-chip>
             </div>
-            <span v-else class="text-caption text-grey ml-1">None</span>
+            <span v-else class="text-caption text-fontgray ml-1">None</span>
           </v-col>
 
           <!-- Assigned Non-Physical -->
@@ -210,7 +197,7 @@
                 {{ card.cardNo }}
               </v-chip>
             </div>
-            <span v-else class="text-caption text-grey ml-1">None</span>
+            <span v-else class="text-caption text-fontgray ml-1">None</span>
           </v-col>
 
           <!-- Replaced Physical -->
@@ -222,7 +209,7 @@
                 :key="card._id"
                 size="small"
                 class="mr-1 mb-1"
-                :color="selectedCardInUnit?._id === card._id ? 'orange' : 'orange'"
+                color="warning"
                 :variant="selectedCardInUnit?._id === card._id ? 'flat' : 'tonal'"
                 style="cursor: pointer"
                 @click="toggleCard(card)"
@@ -230,7 +217,7 @@
                 {{ card.cardNo }}
               </v-chip>
             </div>
-            <span v-else class="text-caption text-grey ml-1">None</span>
+            <span v-else class="text-caption text-fontgray ml-1">None</span>
           </v-col>
 
           <!-- Replaced Non-Physical -->
@@ -242,7 +229,7 @@
                 :key="card._id"
                 size="small"
                 class="mr-1 mb-1"
-                :color="selectedCardInUnit?._id === card._id ? 'orange' : 'orange'"
+                color="warning"
                 :variant="selectedCardInUnit?._id === card._id ? 'flat' : 'tonal'"
                 style="cursor: pointer"
                 @click="toggleCard(card)"
@@ -250,7 +237,7 @@
                 {{ card.cardNo }}
               </v-chip>
             </div>
-            <span v-else class="text-caption text-grey ml-1">None</span>
+            <span v-else class="text-caption text-fontgray ml-1">None</span>
           </v-col>
 
           <!-- Deleted Physical -->
@@ -262,7 +249,7 @@
                 :key="card._id"
                 size="small"
                 class="mr-1 mb-1"
-                :color="selectedCardInUnit?._id === card._id ? 'red' : 'red'"
+                color="error"
                 :variant="selectedCardInUnit?._id === card._id ? 'flat' : 'tonal'"
                 style="cursor: pointer"
                 @click="toggleCard(card)"
@@ -270,7 +257,7 @@
                 {{ card.cardNo }}
               </v-chip>
             </div>
-            <span v-else class="text-caption text-grey ml-1">None</span>
+            <span v-else class="text-caption text-fontgray ml-1">None</span>
           </v-col>
 
           <!-- Deleted Non-Physical -->
@@ -282,7 +269,7 @@
                 :key="card._id"
                 size="small"
                 class="mr-1 mb-1"
-                :color="selectedCardInUnit?._id === card._id ? 'red' : 'red'"
+                color="error"
                 :variant="selectedCardInUnit?._id === card._id ? 'flat' : 'tonal'"
                 style="cursor: pointer"
                 @click="toggleCard(card)"
@@ -290,40 +277,29 @@
                 {{ card.cardNo }}
               </v-chip>
             </div>
-            <span v-else class="text-caption text-grey ml-1">None</span>
+            <span v-else class="text-caption text-fontgray ml-1">None</span>
           </v-col>
         </v-row>
       </v-card-text>
 
-      <v-toolbar class="pa-0" density="compact">
-        <v-row no-gutters>
-          <v-col cols="6" class="pa-0">
+      <v-card-actions class="screen-modal__footer">
+        <v-btn
+          variant="flat"
+          class="text-none screen-btn-ghost"
+          @click="emit('update:modelValue', false)"
+        >
+          Close
+        </v-btn>
+        <v-menu>
+          <template #activator="{ props }">
             <v-btn
-              block
-              variant="text"
-              class="text-none"
-              size="large"
-              height="48"
-              @click="emit('update:modelValue', false)"
+              variant="flat"
+              class="text-none screen-btn-primary"
+              v-bind="props"
             >
-              Close
+              More actions
             </v-btn>
-          </v-col>
-          <v-col cols="6" class="pa-0">
-            <v-menu>
-              <template #activator="{ props }">
-                <v-btn
-                  block
-                  variant="flat"
-                  color="black"
-                  class="text-none"
-                  height="48"
-                  v-bind="props"
-                  tile
-                >
-                  More actions
-                </v-btn>
-              </template>
+          </template>
               <v-list class="pa-0">
                 <v-list-item
                   v-if="canAssignToPerson && isSelectedCardAvailable"
@@ -349,7 +325,7 @@
                 </v-list-item>
                 <v-list-item
                   @click="emit('delete')"
-                  class="text-red"
+                  class="text-error"
                   :disabled="!isSelectedCardDeletable"
                   v-if="canDeleteAccessCard"
                 >
@@ -358,10 +334,8 @@
                   </v-list-item-title>
                 </v-list-item>
               </v-list>
-            </v-menu>
-          </v-col>
-        </v-row>
-      </v-toolbar>
+        </v-menu>
+      </v-card-actions>
     </v-card>
   </v-dialog>
 </template>

package/components/AccessCardQrTagging.vue

@@ -1,84 +1,73 @@
 <template>
-  <v-row no-gutters>
-    <v-col cols="12" class="mb-2">
-      <v-row no-gutters align="center" justify="space-between">
-        <v-row no-gutters class="ga-2">
-          <v-btn
-            class="text-none"
-            rounded="pill"
-            variant="tonal"
-            size="large"
+  <v-row no-gutters class="qr-tagging">
+    <v-col cols="12">
+      <!--
+        The design opens the screen with its name and the screen's actions on
+        that one row. The three buttons used to be `tonal` pills floating above
+        the card with no heading at all - and their labels measured 1.74:1
+        light / 2.18:1 dark on that fill. As `AppButton` they read from the
+        tokens. Same three clicks, same `disabled` rules; the primary action
+        sits rightmost, where the design puts it.
+      -->
+      <PageHeader title="QR Tagging">
+        <template #actions>
+          <AppButton
+            variant="ghost"
             :disabled="!items.length"
             @click="handlePrintAll"
           >
             Print All
-          </v-btn>
-          <v-btn
-            class="text-none"
-            rounded="pill"
-            variant="tonal"
-            size="large"
-            :disabled="!qrCodeAccessCards.length"
-            @click="generateQrCodes"
-          >
-            Generate QR Code
-          </v-btn>
-          <v-btn
-            class="text-none"
-            rounded="pill"
-            variant="tonal"
-            size="large"
+          </AppButton>
+          <AppButton
+            variant="ghost"
             :disabled="!qrCodeAccessCardsToPrint.length"
             @click="handlePrintQrCode"
           >
             Print QR Code
-          </v-btn>
-        </v-row>
-
-        <v-row no-gutters class="ga-2" justify="end" style="max-width: 420px">
-          <v-text-field
-            v-model="searchText"
-            placeholder="Search Card..."
-            variant="outlined"
-            density="comfortable"
-            clearable
-            hide-details
-            style="max-width: 240px"
-          />
-        </v-row>
-      </v-row>
+          </AppButton>
+          <AppButton
+            :disabled="!qrCodeAccessCards.length"
+            @click="generateQrCodes"
+          >
+            Generate QR Code
+          </AppButton>
+        </template>
+      </PageHeader>
     </v-col>
 
     <v-col cols="12" v-if="canViewAllQrTagging">
-      <v-card
-        width="100%"
-        variant="outlined"
-        border="thin"
-        rounded="lg"
-        :loading="loading"
-      >
-        <v-toolbar density="compact" color="grey-lighten-4">
-          <template #prepend>
+      <AppCard class="table-card">
+        <!--
+          ONE toolbar. The refresh button and the search keep their own
+          behaviour; the page range is the toolbar's own count rather than a
+          `text-fontgray` caption, and the pager keeps its model and its
+          `@update:value`.
+        -->
+        <CardToolbar :count="pageRange">
+          <template #left>
             <v-btn fab icon density="comfortable" @click="fetchItems">
               <v-icon>mdi-refresh</v-icon>
             </v-btn>
+            <AppField
+              v-model="searchText"
+              search
+              compact
+              placeholder="Search Card..."
+              klass="qr-tagging__search"
+            />
           </template>
 
-          <template #append>
-            <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 text-caption text-fontgray">
-                {{ pageRange }}
-              </span>
-              <local-pagination
-                v-model="page"
-                :length="pages"
-                @update:value="fetchItems"
-              />
-            </v-row>
+          <template #right>
+            <local-pagination
+              v-model="page"
+              :length="pages"
+              @update:value="fetchItems"
+            />
           </template>
-        </v-toolbar>
+        </CardToolbar>
 
         <v-data-table
+          :loading="loading"
           :headers="tableHeaders"
           :items="items"
           item-value="_id"
@@ -131,7 +120,7 @@
 
           <template #item.qrTag="{ item }">
             <v-icon
-              :color="item.qrTag ? 'success' : 'grey-lighten-1'"
+              :color="item.qrTag ? 'success' : 'muted'"
               size="22"
             >
               {{ item.qrTag ? "mdi-check-circle" : "mdi-circle-outline" }}
@@ -149,7 +138,7 @@
             />
           </template>
         </v-data-table>
-      </v-card>
+      </AppCard>
     </v-col>
 
     <!-- Hidden QR canvases for generation -->
@@ -468,3 +457,11 @@ function showMessage(msg: string, color: string) {
   messageSnackbar.value = true;
 }
 </script>
+
+<style scoped>
+/* The search kept its old 240px ceiling; `.app-field--search` is `flex:1` so
+   it would otherwise fill the toolbar row. */
+.qr-tagging__search {
+  max-width: 240px;
+}
+</style>

package/components/AccessCardReplaceForm.vue

@@ -1,21 +1,22 @@
 <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">Replace Access Card</span>
-      </v-row>
-    </v-toolbar>
-    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-0">
+  <v-card width="100%" class="screen-modal">
+    <v-card-title>Replace Access Card</v-card-title>
+
+    <v-card-text class="screen-modal__body pa-0">
       <v-form v-model="validForm" :disabled="loading">
         <v-row no-gutters class="px-6 pt-4 pb-6">
           <!-- Card being replaced -->
           <v-col cols="12" class="px-1 mb-4">
-            <div class="text-caption text-grey mb-1 font-weight-bold">
+            <!-- `text-grey` is a fixed Vuetify grey - the SAME grey on the dark
+                 page, where it is the hardest thing on the card to read.
+                 `.screen-hint` is the design's `--muted`, which follows the theme. -->
+            <div class="text-caption screen-hint mb-1 font-weight-bold">
               Card being replaced
             </div>
-            <v-chip size="small" variant="tonal" color="warning">
-              {{ card.cardNo }}
-            </v-chip>
+            <!-- A card NUMBER, not a status word, so it takes the design's
+                 dotless tag shape and is given its tone explicitly rather than
+                 having one guessed from the text. -->
+            <StatusChip tone="warn" :dot="false" :label="card.cardNo" />
           </v-col>
 
           <!-- Replacement card -->
@@ -25,8 +26,12 @@
               title="Replacement Card"
               required
             />
+            <!-- Both inputs keep their `:rules`: Replace is gated on
+                 `validForm`. `.filter-field` gives them the design's shape
+                 without touching the validation. -->
             <v-autocomplete
               v-model="form.replacementCardId"
+              class="filter-field"
               density="compact"
               :items="replacementOptions"
               hide-details="auto"
@@ -48,6 +53,7 @@
             />
             <v-textarea
               v-model="form.remarks"
+              class="filter-field"
               density="compact"
               hide-details="auto"
               placeholder="Enter remarks..."
@@ -61,29 +67,27 @@
       </v-form>
     </v-card-text>
 
-    <v-toolbar density="compact">
+    <!-- Was a second `v-toolbar` - a grey slab that stayed grey in dark theme,
+         with square (`tile`) 48px buttons and a hardcoded `color="black"`
+         primary. Same two buttons, same order, on the card's own surface. -->
+    <v-card-actions class="screen-modal__footer">
       <v-row no-gutters>
-        <v-col cols="6">
+        <v-col cols="6" class="pr-2">
           <v-btn
-            tile
             block
-            variant="text"
-            class="text-none"
-            size="48"
+            variant="outlined"
+            class="text-none screen-btn-ghost"
             @click="cancel"
             :disabled="loading"
           >
             Cancel
           </v-btn>
         </v-col>
-        <v-col cols="6">
+        <v-col cols="6" class="pl-2">
           <v-btn
-            tile
             block
             variant="flat"
-            color="black"
-            class="text-none"
-            size="48"
+            class="text-none screen-btn-primary"
             :disabled="!validForm || loading"
             :loading="loading"
             @click="submit"
@@ -92,7 +96,7 @@
           </v-btn>
         </v-col>
       </v-row>
-    </v-toolbar>
+    </v-card-actions>
   </v-card>
 </template>
 <script setup lang="ts">