@7365admin1/layer-common 3.2.2-staging.111 → 3.2.2-staging.113

package/assets/css/screens.css

@@ -242,6 +242,76 @@
   font-size: var(--fs-cell);
 }
 
+/**
+ * ...and the same size again, because inside a real dialog the rule above
+ * never reached the glass. Vuetify scopes
+ *
+ *   .v-dialog > .v-overlay__content > .v-card > .v-card-text { font-size: inherit }
+ *
+ * which is a FOUR-class chain against our one, so a `.screen-modal__body` in a
+ * `v-dialog` inherited the root 16px instead of the design's 13.5px --fs-cell.
+ * Measured on `AccessCardDeleteDialog`: 16px/400 where --fs-cell is 13.5px.
+ * It is invisible in a harness that mounts the card WITHOUT its dialog, which
+ * is how it survived. Naming the same chain plus the card's own class wins it
+ * back on specificity alone - no `!important`, same technique as the button
+ * height fix.
+ */
+.v-dialog > .v-overlay__content > .v-card.screen-modal > .screen-modal__body {
+  font-size: var(--fs-cell);
+}
+
+/**
+ * The design's modal footer, literal from the prototype's Create Role dialog:
+ *
+ *   <div style="display:flex;gap:10px;padding:16px 22px;
+ *               border-top:1px solid var(--border)">
+ *     <button style="flex:1; ...ghost">Cancel</button>
+ *     <button style="flex:1; ...primary">Submit</button>
+ *
+ * Two EQUAL-WIDTH buttons on a bordered strip, ghost first. Stated once
+ * because the product opens confirm dialogs from a couple of dozen components
+ * and each of them was drawing its own footer by hand.
+ */
+.screen-modal__footer {
+  display: flex;
+  gap: 10px;
+  padding: 16px 22px;
+  border-top: 1px solid var(--border);
+}
+
+.screen-modal__footer > .v-btn,
+.screen-modal__footer > .app-btn {
+  flex: 1;
+}
+
+/**
+ * The modal's close control, literal from the same Create Role dialog:
+ *
+ *   <button style="display:flex;align-items:center;justify-content:center;
+ *                  width:32px;height:32px;border:none;border-radius:8px;
+ *                  background:transparent;color:var(--muted);"
+ *           style-hover="background:var(--hover)">close</button>
+ *
+ * Borderless and 32px square - NOT `.screen-icon-btn`, which is the bordered
+ * 40px square the design draws in a toolbar. The glyph is 19px.
+ */
+.screen-modal__close {
+  width: 32px;
+  height: 32px;
+  min-width: 32px;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted);
+}
+
+.screen-modal__close:hover {
+  background: var(--hover);
+}
+
+.screen-modal__close .v-icon {
+  font-size: 19px;
+}
+
 /**
  * The design's two buttons, for the dialogs and toolbars that draw their own.
  *

package/components/AccessCardAssignToUnitForm.vue

@@ -1,11 +1,8 @@
 <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">Assign Access Card to Unit</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>Assign Access Card to Unit</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-2">
           <!-- Building -->
@@ -147,10 +144,10 @@
             />
             <div class="text-caption mt-1">
               <template v-if="availableLoading">
-                <span class="text-grey">Loading available count...</span>
+                <span class="screen-hint">Loading available count...</span>
               </template>
               <template v-else-if="availableCount !== null">
-                <span :class="availableCount === 0 ? 'text-error' : 'text-grey'">
+                <span :class="availableCount === 0 ? 'text-error' : 'screen-hint'">
                   Available: {{ availableCount }}
                 </span>
               </template>
@@ -160,29 +157,24 @@
       </v-form>
     </v-card-text>
 
-    <v-toolbar density="compact">
+    <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 || availableCount === 0 || (availableCount !== null && form.quantity > availableCount)"
             :loading="loading"
             @click="submit"
@@ -191,7 +183,7 @@
           </v-btn>
         </v-col>
       </v-row>
-    </v-toolbar>
+    </v-card-actions>
   </v-card>
 </template>
 <script setup lang="ts">

package/components/AccessCardDeleteDialog.vue

@@ -1,20 +1,28 @@
 <template>
-  <v-dialog :model-value="modelValue" width="450" persistent>
-    <v-card width="100%">
-      <v-toolbar density="compact" class="pl-4">
-        <span class="font-weight-medium text-h5">Delete Card</span>
-      </v-toolbar>
+  <!-- 520px is the handoff's `--modal-w`; the card wears `.screen-modal` for
+       the 16px corner, the `--card` surface and the modal shadow. The two
+       `v-toolbar`s it used for the title row and the footer were grey slabs
+       that stay grey on the dark theme - a `v-card-title` and the shared
+       `.screen-modal__footer` are the same rows on the card's own surface. -->
+  <v-dialog :model-value="modelValue" width="520" persistent>
+    <v-card class="screen-modal" width="100%">
+      <v-card-title>Delete Card</v-card-title>
 
-      <v-card-text>
-        <p class="text-subtitle-2 text-center mb-4">
+      <v-card-text class="screen-modal__body">
+        <p class="text-center mb-4">
           Are you sure you want to delete this card? This action cannot be
           undone.
         </p>
 
         <v-form v-model="validForm" :disabled="loading">
           <InputLabel class="text-capitalize font-weight-bold" title="Remarks" required />
+          <!-- Still a `v-textarea`, not an `AppField`: Delete Card is gated on
+               `validForm`, which only exists because this `:rules` runs.
+               `.filter-field` gives it the design's 10px corner and 13.5px
+               type without taking the validation away. -->
           <v-textarea
             v-model="remarks"
+            class="filter-field"
             placeholder="Enter remarks..."
             persistent-placeholder
             rows="3"
@@ -29,38 +37,32 @@
         </v-row>
       </v-card-text>
 
-      <v-toolbar density="compact">
-        <v-row no-gutters>
-          <v-col cols="6">
-            <v-btn
-              tile
-              block
-              size="48"
-              variant="text"
-              class="text-none"
-              :disabled="loading"
-              @click="handleClose"
-            >
-              Close
-            </v-btn>
-          </v-col>
-          <v-col cols="6">
-            <v-btn
-              tile
-              block
-              size="48"
-              color="black"
-              variant="flat"
-              class="text-none"
-              :loading="loading"
-              :disabled="!validForm || loading"
-              @click="handleConfirm"
-            >
-              Delete Card
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-toolbar>
+      <!-- The design's footer: two equal-width buttons, ghost then primary, on
+           a bordered strip. The confirming button was a hardcoded color="black"
+           fill - the same black on both themes. The handoff draws no
+           destructive button, so it takes the primary shape like every other
+           modal's confirm; the destructive-variant gap stays a design
+           decision. `loading` keeps it a v-btn: AppButton has no in-flight
+           state, and this is the only signal the delete is running. -->
+      <div class="screen-modal__footer">
+        <v-btn
+          variant="outlined"
+          class="screen-btn-ghost"
+          :disabled="loading"
+          @click="handleClose"
+        >
+          Close
+        </v-btn>
+        <v-btn
+          variant="flat"
+          class="screen-btn-primary"
+          :loading="loading"
+          :disabled="!validForm || loading"
+          @click="handleConfirm"
+        >
+          Delete Card
+        </v-btn>
+      </div>
     </v-card>
   </v-dialog>
 </template>

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">

package/components/AddEqupmentForm.vue

@@ -1,15 +1,11 @@
 <template>
   <v-dialog v-model="showDialog" max-width="450">
-    <v-card>
-      <v-toolbar>
-        <v-row no-gutters class="fill-height px-6" align="center">
-          <span class="font-weight-bold text-h6 text-capitalize">
-            {{ prop.mode === "edit" ? "Edit Equipment" : "Add New Equipment" }}
-          </span>
-        </v-row>
-      </v-toolbar>
+    <v-card class="screen-modal">
+      <v-card-title class="text-capitalize">
+        {{ prop.mode === "edit" ? "Edit Equipment" : "Add New Equipment" }}
+      </v-card-title>
 
-      <v-card-text class="pa-4">
+      <v-card-text class="screen-modal__body pa-4">
         <v-form ref="formRef" v-model="valid">
           <v-row no-gutters class="pa-0">
             <v-col cols="12" class="pa-0 mb-2">
@@ -39,7 +35,7 @@
                 variant="outlined"
                 placeholder="Enter equipment name"
                 hide-details="auto"
-                class="mb-0"
+                class="mb-0 filter-field"
               />
             </v-col>
 
@@ -58,35 +54,35 @@
                 variant="outlined"
                 placeholder="Select unitOfMeasurement"
                 hide-details="auto"
-                class="mb-0"
+                class="mb-0 filter-field"
               />
             </v-col>
           </v-row>
         </v-form>
       </v-card-text>
 
-      <v-toolbar class="pa-0" density="compact">
+      <!-- Was a `v-toolbar` footer: a grey slab holding a bare-text Cancel and
+           a `rounded-0`, `color="black"` primary - a square black button that
+           ignored the theme. Same two buttons on the card's own surface, with
+           the design's radius and accent fill. -->
+      <v-card-actions class="screen-modal__footer">
         <v-row no-gutters>
-          <v-col cols="6" class="pa-0">
+          <v-col cols="6" class="pr-2">
             <v-btn
               block
-              variant="text"
-              class="text-none"
-              size="large"
+              variant="outlined"
+              class="text-none screen-btn-ghost"
               @click="close"
-              height="48"
             >
               Cancel
             </v-btn>
           </v-col>
 
-          <v-col cols="6" class="pa-0">
+          <v-col cols="6" class="pl-2">
             <v-btn
               block
               variant="flat"
-              color="black"
-              class="text-none font-weight-bold rounded-0"
-              height="48"
+              class="text-none screen-btn-primary"
               :loading="submitting"
               @click="submit"
             >
@@ -94,7 +90,7 @@
             </v-btn>
           </v-col>
         </v-row>
-      </v-toolbar>
+      </v-card-actions>
     </v-card>
   </v-dialog>
 </template>

package/components/AttendanceDetailsDialog.vue

@@ -4,16 +4,14 @@
     :max-width="attendance?.checkOut?.timestamp ? 900 : 500"
     persistent
   >
-    <v-card>
-      <v-toolbar>
-        <v-row no-gutters class="fill-height px-6" align="center">
-          <span class="font-weight-bold text-h6 text-capitalize"
-            >Attendance Details</span
-          >
-        </v-row>
-      </v-toolbar>
+    <!-- The card wears `.screen-modal` (16px corner, `--card`, the modal
+         shadow). The `v-toolbar` that stood in for the title row and the one
+         that stood in for the footer were both fixed grey slabs that stay grey
+         on the dark theme. -->
+    <v-card class="screen-modal">
+      <v-card-title class="text-capitalize">Attendance Details</v-card-title>
 
-      <v-card-text class="pa-6">
+      <v-card-text class="screen-modal__body pa-6">
         <v-row v-if="attendance" dense>
           <v-col :cols="attendance.checkOut?.timestamp ? 6 : 12">
             <v-row dense>
@@ -21,14 +19,14 @@
                 <InputLabel title="Check In" />
               </v-col>
               <v-col cols="12" class="mb-1">
-                <span class="text-body-1">{{
+                <span class="att-dlg__time">{{
                   attendance.checkIn?.timestamp
                     ? formatDate(attendance.checkIn.timestamp)
                     : "N/A"
                 }}</span>
               </v-col>
               <v-col cols="12" class="mb-2">
-                <span class="text-caption text-medium-emphasis">
+                <span class="screen-hint att-dlg__meta">
                   {{
                     attendance.checkIn?.location?.latitude &&
                     attendance.checkIn?.location?.longitude
@@ -38,29 +36,21 @@
                 </span>
               </v-col>
               <v-col cols="12">
-                <v-card
-                  v-if="attendance.checkIn?.img"
-                  variant="outlined"
-                  class="pa-0"
-                  style="border: 1px solid rgba(0, 0, 0, 0.12)"
-                >
+                <!-- Was an inline `border: 1px solid rgba(0,0,0,.12)` - a
+                     literal black rule that is the same black on the dark
+                     theme. `--border` is that rule in each theme, and the
+                     frame takes the design's inner radius. -->
+                <div v-if="attendance.checkIn?.img" class="att-dlg__frame">
                   <v-img
                     :src="getFileUrl(attendance.checkIn.img)"
                     height="280"
                     width="100%"
                     cover
                   ></v-img>
-                </v-card>
-                <v-card
-                  v-else
-                  variant="outlined"
-                  class="pa-8 text-center"
-                  style="border: 1px solid rgba(0, 0, 0, 0.12); height: 280px"
-                >
-                  <span class="text-caption text-medium-emphasis"
-                    >No image</span
-                  >
-                </v-card>
+                </div>
+                <div class="att-dlg__frame att-dlg__frame--empty pa-8 text-center" v-else>
+                  <span class="screen-hint att-dlg__meta">No image</span>
+                </div>
               </v-col>
             </v-row>
           </v-col>
@@ -71,12 +61,12 @@
                 <InputLabel title="Check Out" />
               </v-col>
               <v-col cols="12" class="mb-1">
-                <span class="text-body-1">{{
+                <span class="att-dlg__time">{{
                   formatDate(attendance.checkOut.timestamp)
                 }}</span>
               </v-col>
               <v-col cols="12" class="mb-2">
-                <span class="text-caption text-medium-emphasis">
+                <span class="screen-hint att-dlg__meta">
                   {{
                     attendance.checkOut?.location?.latitude &&
                     attendance.checkOut?.location?.longitude
@@ -86,29 +76,17 @@
                 </span>
               </v-col>
               <v-col cols="12">
-                <v-card
-                  v-if="attendance.checkOut?.img"
-                  variant="outlined"
-                  class="pa-0"
-                  style="border: 1px solid rgba(0, 0, 0, 0.12)"
-                >
+                <div v-if="attendance.checkOut?.img" class="att-dlg__frame">
                   <v-img
                     :src="getFileUrl(attendance.checkOut.img)"
                     height="280"
                     width="100%"
                     cover
                   ></v-img>
-                </v-card>
-                <v-card
-                  v-else
-                  variant="outlined"
-                  class="pa-8 text-center"
-                  style="border: 1px solid rgba(0, 0, 0, 0.12); height: 280px"
-                >
-                  <span class="text-caption text-medium-emphasis"
-                    >No image</span
-                  >
-                </v-card>
+                </div>
+                <div class="att-dlg__frame att-dlg__frame--empty pa-8 text-center" v-else>
+                  <span class="screen-hint att-dlg__meta">No image</span>
+                </div>
               </v-col>
             </v-row>
           </v-col>
@@ -121,22 +99,11 @@
         </v-row>
       </v-card-text>
 
-      <v-toolbar class="pa-0" density="compact">
-        <v-row no-gutters>
-          <v-col cols="12" class="pa-0">
-            <v-btn
-              block
-              variant="text"
-              class="text-none"
-              size="large"
-              @click="close"
-              height="48"
-            >
-              Close
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-toolbar>
+      <div class="screen-modal__footer">
+        <v-btn variant="outlined" class="screen-btn-ghost" @click="close">
+          Close
+        </v-btn>
+      </div>
     </v-card>
   </v-dialog>
 </template>
@@ -183,3 +150,30 @@ watch(showDialog, (newVal) => {
   }
 });
 </script>
+
+<style scoped>
+/* `text-body-1` was 1rem/400 and `text-caption text-medium-emphasis` was
+   0.75rem on Vuetify's 60%-alpha ink. The handoff names no type for a
+   label/value detail row, so both take the established cell and hint. */
+.att-dlg__time {
+  font-size: var(--fs-cell);
+  font-weight: var(--fw-cell);
+}
+
+.att-dlg__meta {
+  font-size: var(--fs-breadcrumb);
+}
+
+.att-dlg__frame {
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  overflow: hidden;
+}
+
+.att-dlg__frame--empty {
+  height: 280px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>