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

package/components/AccessCardAddForm.vue

@@ -1,8 +1,8 @@
 <template>
-  <v-card width="100%">
-    <v-toolbar>
+  <v-card width="100%" class="screen-modal">
+    <v-toolbar class="screen-dialog-bar">
       <v-row no-gutters class="fill-height px-6" align="center" justify="space-between">
-        <span class="font-weight-bold text-h5 text-capitalize">
+        <span class="screen-card-title text-capitalize">
           {{ prop.mode }} Access Card
         </span>
         <v-btn-toggle
@@ -19,7 +19,10 @@
         </v-btn-toggle>
       </v-row>
     </v-toolbar>
-    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-0">
+    <!-- The height cap stays ON THE BODY. `.screen-modal` caps the CARD, which
+         only reaches the glass inside a dialog's flex column; mounted on its own
+         the footer would fall below the fold. -->
+    <v-card-text class="screen-modal__body pa-0" style="max-height: 100vh">
       <!-- Bulk Upload Mode -->
       <template v-if="uploadMode === 'bulk'">
         <v-row no-gutters class="px-6 pt-4 pb-2">
@@ -63,12 +66,12 @@
 
               <!-- Column Guide -->
               <div class="mt-3">
-                <p class="text-caption font-weight-bold text-grey-darken-2 mb-1 text-uppercase">
+                <p class="text-caption font-weight-bold text-fontgray mb-1 text-uppercase">
                   Template Column Guide
                 </p>
                 <v-table density="compact" class="text-caption rounded border">
                   <thead>
-                    <tr class="bg-grey-lighten-4">
+                    <tr class="template-guide-head">
                       <th class="text-left text-caption font-weight-bold py-1 px-2">Column</th>
                       <th class="text-left text-caption font-weight-bold py-1 px-2">Format / Accepted Values</th>
                       <th class="text-left text-caption font-weight-bold py-1 px-2">Example</th>
@@ -77,8 +80,8 @@
                   <tbody>
                     <tr v-for="col in templateColumnGuide" :key="col.name">
                       <td class="py-1 px-2 font-weight-medium" style="white-space: nowrap">{{ col.name }}</td>
-                      <td class="py-1 px-2 text-grey-darken-1">{{ col.format }}</td>
-                      <td class="py-1 px-2 text-grey-darken-2">{{ col.example }}</td>
+                      <td class="py-1 px-2 text-fontgray">{{ col.format }}</td>
+                      <td class="py-1 px-2 text-fontgray">{{ col.example }}</td>
                     </tr>
                   </tbody>
                 </v-table>
@@ -306,7 +309,7 @@
                 ></span>
                 <span class="d-flex align-center">
                   Anti Pass Back
-                  <v-icon class="ml-1" color="grey" size="small"
+                  <v-icon class="ml-1 text-fontgray" size="small"
                     >mdi-help-circle</v-icon
                   >
                   <v-checkbox
@@ -382,39 +385,25 @@
         </v-row>
       </v-form>
     </v-card-text>
-    <v-toolbar density="compact">
-      <v-row no-gutters>
-        <v-col cols="6">
-          <v-btn
-            tile
-            block
-            variant="text"
-            class="text-none"
-            size="48"
-            @click="cancel"
-            :disabled="disable"
-          >
-            Cancel
-          </v-btn>
-        </v-col>
-
-        <v-col cols="6">
-          <v-btn
-            tile
-            block
-            variant="flat"
-            color="black"
-            class="text-none"
-            size="48"
-            :disabled="(uploadMode === 'single' ? !validForm : !bulkFile || !entryPassTemplate.id || templateLoading) || disable"
-            @click="submit"
-            :loading="disable"
-          >
-            Submit
-          </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"
+        :disabled="disable"
+        @click="cancel"
+      >
+        Cancel
+      </v-btn>
+      <v-btn
+        variant="flat"
+        class="text-none screen-btn-primary"
+        :disabled="(uploadMode === 'single' ? !validForm : !bulkFile || !entryPassTemplate.id || templateLoading) || disable"
+        :loading="disable"
+        @click="submit"
+      >
+        Submit
+      </v-btn>
+    </v-card-actions>
   </v-card>
 </template>
 <script setup lang="ts">
@@ -813,3 +802,14 @@ async function submit() {
   }
 }
 </script>
+
+<style scoped>
+/*
+ * The template guide's header row. `bg-grey-lighten-4` was a fixed near-white,
+ * i.e. a bright band across a dark card; `--thead` is the design's own table
+ * head wash and is defined per theme.
+ */
+.template-guide-head {
+  background: var(--thead);
+}
+</style>

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/AccessCardDetailsDialog.vue

@@ -1,117 +1,109 @@
 <template>
   <v-dialog :model-value="modelValue" width="480" persistent>
-    <v-card width="100%">
-      <v-toolbar density="compact" color="black">
-        <v-toolbar-title class="text-subtitle-1 font-weight-medium">
+    <v-card width="100%" class="screen-modal card-details">
+      <div class="card-details__head">
+        <v-card-title>
           Card Details — {{ card?.cardNo ?? "N/A" }}
-        </v-toolbar-title>
-        <v-btn icon @click="emit('update:modelValue', false)">
-          <v-icon>mdi-close</v-icon>
-        </v-btn>
-      </v-toolbar>
+        </v-card-title>
+        <AppButton variant="icon" icon="mdi-close" aria-label="Close"
+          @click="emit('update:modelValue', false)" />
+      </div>
 
-      <v-card-text style="max-height: 70vh; overflow-y: auto" class="pa-4">
+      <div class="screen-modal__body card-details__body">
         <div v-if="pending" class="d-flex justify-center align-center py-8">
-          <v-progress-circular indeterminate color="black" />
+          <v-progress-circular indeterminate color="accent" />
         </div>
 
-        <div v-else-if="!details" class="text-center text-grey py-8">
+        <div v-else-if="!details" class="card-details__empty">
           No details available.
         </div>
 
         <div v-else class="d-flex flex-column ga-3">
           <div>
-            <div class="text-caption text-grey">Card No</div>
-            <div class="text-body-2 font-weight-medium">{{ details.cardNo ?? "N/A" }}</div>
+            <div class="card-details__label">Card No</div>
+            <div class="card-details__value">{{ details.cardNo ?? "N/A" }}</div>
           </div>
 
           <div>
-            <div class="text-caption text-grey">Type</div>
-            <div class="text-body-2 font-weight-medium">{{ details.type ?? "N/A" }}</div>
+            <div class="card-details__label">Type</div>
+            <div class="card-details__value">{{ details.type ?? "N/A" }}</div>
           </div>
 
           <div v-if="details.status">
-            <div class="text-caption text-grey">Status</div>
-            <v-chip
-              :color="statusColor(details.status)"
-              variant="flat"
-              size="x-small"
-              class="text-capitalize font-weight-medium mt-1"
-            >
-              {{ details.status ?? "N/A" }}
-            </v-chip>
+            <div class="card-details__label">Status</div>
+            <StatusChip class="mt-1 text-capitalize" :status="details.status" />
           </div>
 
           <div>
-            <div class="text-caption text-grey">Activated</div>
-            <div class="text-body-2 font-weight-medium">{{ details.isActivated ? "Yes" : "No" }}</div>
+            <div class="card-details__label">Activated</div>
+            <div class="card-details__value">{{ details.isActivated ? "Yes" : "No" }}</div>
           </div>
 
           <div v-if="details.site?.name">
-            <div class="text-caption text-grey">Site</div>
-            <div class="text-body-2 font-weight-medium">{{ details.site?.name ?? "N/A" }}</div>
+            <div class="card-details__label">Site</div>
+            <div class="card-details__value">{{ details.site?.name ?? "N/A" }}</div>
           </div>
 
           <div>
-            <div class="text-caption text-grey">User</div>
-            <div class="text-body-2 font-weight-medium">
+            <div class="card-details__label">User</div>
+            <div class="card-details__value">
               {{ details.userCred?.name ?? details.user?.name ?? "N/A" }}
               <template v-if="details.user?.email">({{ details.user.email }})</template>
             </div>
           </div>
 
           <div v-if="details.userType">
-            <div class="text-caption text-grey">User Type</div>
-            <div class="text-body-2 font-weight-medium">{{ details.userType }}</div>
+            <div class="card-details__label">User Type</div>
+            <div class="card-details__value">{{ details.userType }}</div>
           </div>
 
           <!-- Visitor / Resident Credentials -->
           <template v-if="details.userCred">
             <v-divider />
-            <div class="text-caption font-weight-bold text-grey-darken-2 text-uppercase">
+            <div class="card-details__section">
               {{ details.userType ?? "Visitor Information" }}
             </div>
 
             <div v-if="details.userCred.email">
-              <div class="text-caption text-grey">Email</div>
-              <div class="text-body-2 font-weight-medium">{{ details.userCred.email }}</div>
+              <div class="card-details__label">Email</div>
+              <div class="card-details__value">{{ details.userCred.email }}</div>
             </div>
 
             <div v-if="details.userCred.nric">
-              <div class="text-caption text-grey">NRIC</div>
-              <div class="text-body-2 font-weight-medium">{{ details.userCred.nric }}</div>
+              <div class="card-details__label">NRIC</div>
+              <div class="card-details__value">{{ details.userCred.nric }}</div>
             </div>
 
             <div v-if="details.userCred.contact">
-              <div class="text-caption text-grey">Contact</div>
-              <div class="text-body-2 font-weight-medium">{{ details.userCred.contact }}</div>
+              <div class="card-details__label">Contact</div>
+              <div class="card-details__value">{{ details.userCred.contact }}</div>
             </div>
 
             <div v-if="details.userCred.company">
-              <div class="text-caption text-grey">Company</div>
-              <div class="text-body-2 font-weight-medium">{{ details.userCred.company }}</div>
+              <div class="card-details__label">Company</div>
+              <div class="card-details__value">{{ details.userCred.company }}</div>
             </div>
 
             <div v-if="details.userCred.plateNumber">
-              <div class="text-caption text-grey">Plate Number</div>
-              <div class="text-body-2 font-weight-medium">{{ details.userCred.plateNumber }}</div>
+              <div class="card-details__label">Plate Number</div>
+              <div class="card-details__value">{{ details.userCred.plateNumber }}</div>
             </div>
             <v-divider />
           </template>
 
           <div>
-            <div class="text-caption text-grey">Created At</div>
-            <div class="text-body-2 font-weight-medium">{{ formatDate(details.createdAt) }}</div>
+            <div class="card-details__label">Created At</div>
+            <div class="card-details__value">{{ formatDate(details.createdAt) }}</div>
           </div>
 
           <div>
-            <div class="text-caption text-grey">Updated At</div>
-            <div class="text-body-2 font-weight-medium">{{ formatDate(details.updatedAt) }}</div>
+            <div class="card-details__label">Updated At</div>
+            <div class="card-details__value">{{ formatDate(details.updatedAt) }}</div>
           </div>
 
           <div v-if="details.remarks">
-            <div class="text-caption text-grey">Remarks</div>
-            <div class="text-body-2 font-weight-medium">{{ details.remarks }}</div>
+            <div class="card-details__label">Remarks</div>
+            <div class="card-details__value">{{ details.remarks }}</div>
           </div>
 
           <!-- History -->
@@ -121,7 +113,7 @@
               class="d-flex align-center justify-space-between cursor-pointer"
               @click="historyOpen = !historyOpen"
             >
-              <div class="text-caption font-weight-bold text-grey-darken-2 text-uppercase">
+              <div class="card-details__section">
                 History ({{ details.history.length }})
               </div>
               <v-icon size="16" :icon="historyOpen ? 'mdi-chevron-up' : 'mdi-chevron-down'" />
@@ -137,37 +129,36 @@
                 <div class="d-flex flex-column align-center" style="width: 20px; flex-shrink: 0;">
                   <div
                     class="timeline-dot rounded-circle mt-1"
-                    :class="(entry.type === 'assigned' || entry.visitorId) ? 'bg-blue' : 'bg-orange'"
+                    :class="isAssignment(entry) ? 'timeline-dot--assigned' : 'timeline-dot--returned'"
                   />
                   <div
                     v-if="idx < sortedHistory.length - 1"
-                    class="timeline-line bg-grey-lighten-2 mt-1"
+                    class="timeline-line mt-1"
                   />
                 </div>
 
                 <!-- Entry content -->
                 <div class="d-flex flex-column ga-1 pb-4 flex-grow-1">
                   <div class="d-flex align-center justify-space-between">
-                    <v-chip
-                      size="x-small"
-                      variant="tonal"
-                      :color="(entry.type === 'assigned' || entry.visitorId) ? 'blue' : 'orange'"
-                      :prepend-icon="(entry.type === 'assigned' || entry.visitorId) ? 'mdi-account-arrow-right' : 'mdi-arrow-u-left-top'"
-                    >
-                      {{ (entry.type === 'assigned' || entry.visitorId) ? "Assigned" : "Returned" }}
-                    </v-chip>
-                    <span class="text-caption text-grey">{{ formatDate(entry.createdAt) }}</span>
+                    <StatusChip :status="isAssignment(entry) ? 'Assigned' : 'Returned'">
+                      <v-icon
+                        size="13"
+                        class="mr-1"
+                        :icon="isAssignment(entry) ? 'mdi-account-arrow-right' : 'mdi-arrow-u-left-top'"
+                      />{{ isAssignment(entry) ? "Assigned" : "Returned" }}
+                    </StatusChip>
+                    <span class="card-details__label">{{ formatDate(entry.createdAt) }}</span>
                   </div>
 
                   <!-- Assignment entry -->
                   <template v-if="entry.type === 'assigned' || entry.visitorId">
-                    <div class="text-body-2 font-weight-medium">{{ entry.name ?? "N/A" }}</div>
-                    <div class="text-caption text-grey-darken-1">
+                    <div class="card-details__value">{{ entry.name ?? "N/A" }}</div>
+                    <div class="card-details__sub">
                       <span v-if="entry.nric">NRIC: {{ entry.nric }}</span>
                       <span v-if="entry.contact" class="ml-2">· {{ entry.contact }}</span>
                       <span v-if="entry.email && !entry.nric && !entry.contact">{{ entry.email }}</span>
                     </div>
-                    <div class="text-caption text-grey-darken-1">
+                    <div class="card-details__sub">
                       <span v-if="entry.company">{{ entry.company }}</span>
                       <span v-if="entry.plateNumber" class="ml-2">· {{ entry.plateNumber }}</span>
                     </div>
@@ -176,12 +167,10 @@
                   <!-- Return/checkout entry -->
                   <template v-else>
                     <div class="d-flex align-center ga-2">
-                      <v-chip size="x-small" variant="flat" :color="statusColor(entry.status?.toLowerCase())">
-                        {{ entry.status ?? "N/A" }}
-                      </v-chip>
-                      <span v-if="entry.damage" class="text-caption text-error">Damaged</span>
+                      <StatusChip :status="entry.status" :label="entry.status ?? 'N/A'" />
+                      <span v-if="entry.damage" class="card-details__damage">Damaged</span>
                     </div>
-                    <div v-if="entry.remarks" class="text-caption text-grey-darken-1">
+                    <div v-if="entry.remarks" class="card-details__sub">
                       Remarks: {{ entry.remarks }}
                     </div>
                   </template>
@@ -190,7 +179,7 @@
             </template>
           </template>
         </div>
-      </v-card-text>
+      </div>
     </v-card>
   </v-dialog>
 </template>
@@ -245,15 +234,12 @@ watch(
   }
 );
 
-function statusColor(status: string) {
-  const map: Record<string, string> = {
-    active: "success",
-    assigned: "primary",
-    replaced: "orange",
-    deleted: "error",
-    available: "grey",
-  };
-  return map[status] ?? "grey";
+/**
+ * A history entry is an ASSIGNMENT if it says so or carries a visitor; the
+ * alternative is a return. Was written out three times inline.
+ */
+function isAssignment(entry: Record<string, any>) {
+  return entry.type === "assigned" || Boolean(entry.visitorId);
 }
 
 function formatDate(date: string) {
@@ -270,14 +256,74 @@ function formatDate(date: string) {
 </script>
 
 <style scoped>
+.card-details__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: 12px;
+}
+
+.card-details__body {
+  padding: 0 20px 20px;
+  max-height: 70vh;
+}
+
+.card-details__label {
+  font-size: var(--fs-breadcrumb);
+  color: var(--text2);
+}
+
+.card-details__value {
+  font-size: var(--fs-cell);
+  font-weight: var(--fw-cell);
+  color: var(--text);
+}
+
+.card-details__section {
+  font-size: var(--fs-section-label);
+  font-weight: var(--fw-section-label);
+  letter-spacing: var(--ls-section-label);
+  text-transform: uppercase;
+  color: var(--text2);
+}
+
+.card-details__sub {
+  font-size: var(--fs-breadcrumb);
+  color: var(--text2);
+}
+
+.card-details__empty {
+  padding: 32px 0;
+  text-align: center;
+  font-size: var(--fs-cell);
+  color: var(--muted);
+}
+
+.card-details__damage {
+  font-size: var(--fs-breadcrumb);
+  color: var(--err);
+}
+
 .timeline-dot {
   width: 10px;
   height: 10px;
   flex-shrink: 0;
 }
+
+/* Were `bg-blue` / `bg-orange` / `bg-grey-lighten-2` - three fixed Vuetify hues
+   that do not follow the theme. Same meanings, as tokens. */
+.timeline-dot--assigned {
+  background: var(--info);
+}
+
+.timeline-dot--returned {
+  background: var(--warn);
+}
+
 .timeline-line {
   width: 2px;
   flex-grow: 1;
   min-height: 16px;
+  background: var(--border);
 }
 </style>