@7365admin1/layer-common 3.2.2-staging.124 → 3.2.2-staging.126

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>

package/components/AttendanceMapSearchDialog.vue

@@ -1,13 +1,11 @@
 <template>
   <v-dialog v-model="showDialog" max-width="500" persistent>
-    <v-card>
-      <v-toolbar>
-        <v-row no-gutters class="fill-height px-6" align="center">
-          <span class="font-weight-bold text-h6">Search Location</span>
-        </v-row>
-      </v-toolbar>
-
-      <v-card-text class="pa-6">
+    <v-card class="screen-modal map-search">
+      <div class="map-search__head">
+        <v-card-title>Search Location</v-card-title>
+      </div>
+
+      <div class="screen-modal__body map-search__body filter-field">
         <v-form ref="formRef" @submit.prevent="handleSearch">
           <v-row dense>
             <v-col cols="12" md="6">
@@ -64,47 +62,23 @@
             </v-col>
           </v-row>
         </v-form>
-      </v-card-text>
-
-      <v-toolbar class="pa-0" density="compact">
-        <v-row no-gutters>
-          <v-col cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="text"
-              class="text-none"
-              size="large"
-              height="56"
-              :disabled="searching"
-              @click="handleClose"
-            >
-              Cancel
-            </v-btn>
-          </v-col>
-          <v-col cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="flat"
-              color="black"
-              class="text-none font-weight-bold rounded-0"
-              height="56"
-              size="large"
-              :loading="searching"
-              :disabled="!formData.postalCode"
-              @click="handleSearch"
-            >
-              <v-icon class="mr-2">mdi-magnify</v-icon>
-              Search
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-toolbar>
+      </div>
+
+      <div class="map-search__footer">
+        <AppButton variant="ghost" :disabled="searching" @click="handleClose">Cancel</AppButton>
+        <AppButton
+          icon="mdi-magnify"
+          :disabled="searching || !formData.postalCode"
+          @click="handleSearch"
+        >
+          Search
+        </AppButton>
+      </div>
     </v-card>
   </v-dialog>
 
   <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
 </template>
-That is 
 
 <script setup lang="ts">
 const showDialog = defineModel({ type: Boolean, default: false });
@@ -391,3 +365,27 @@ watch(showDialog, (newVal) => {
   }
 });
 </script>
+
+<style scoped>
+.map-search__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: 12px;
+}
+
+.map-search__body {
+  padding: 0 20px;
+}
+
+/* The design's dialog footer - ghost secondary, then one primary, right
+   aligned. Deliberately not the shared `.screen-modal__footer`: that class is
+   on the batch-D branch (#1150), not on this base, and adding a second copy of
+   it to `screens.css` here would collide with that PR. */
+.map-search__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px 20px 20px;
+}
+</style>

package/components/AttendanceSettingsDialog.vue

@@ -1,13 +1,11 @@
 <template>
   <v-dialog v-model="showDialog" max-width="600" persistent>
-    <v-card>
-      <v-toolbar>
-        <v-row no-gutters class="fill-height px-6" align="center">
-          <span class="font-weight-bold text-h6">Attendance Settings</span>
-        </v-row>
-      </v-toolbar>
-
-      <v-card-text class="pa-6">
+    <v-card class="screen-modal attendance-settings">
+      <div class="attendance-settings__head">
+        <v-card-title>Attendance Settings</v-card-title>
+      </div>
+
+      <div class="screen-modal__body attendance-settings__body filter-field">
         <v-alert
           v-if="error"
           type="error"
@@ -26,12 +24,13 @@
               <v-checkbox
                 v-model="isGeofencingEnabled"
                 label="Enable Geofencing"
+                color="accent"
                 density="comfortable"
                 hide-details
               />
               <span
                 v-if="isGeofencingEnabled"
-                class="text-body-2 text-medium-emphasis"
+                class="attendance-settings__hint"
               >
                 Enabling this setting will require users to take attendance
                 within a certain radius via QR code or within the site location.
@@ -43,44 +42,32 @@
                 <v-checkbox
                   v-model="isQrEnabled"
                   label="Enable QR Code"
+                  color="accent"
                   density="comfortable"
                   hide-details
                 />
               </v-col>
 
               <v-col v-if="isQrEnabled" cols="12">
-                <v-card
-                  variant="flat"
-                  class="pa-4 d-flex flex-column align-center"
-                >
+                <div class="attendance-settings__qr">
                   <QrcodeVue
                     :value="site"
                     :level="'M'"
                     :render-as="'svg'"
                     :size="300"
                   />
-                  <v-btn
-                    variant="text"
-                    color="primary"
-                    class="mt-2"
-                    @click="downloadQrCode"
-                  >
-                    <v-icon class="mr-2">mdi-download</v-icon>
+                  <AppButton variant="ghost" icon="mdi-download" class="mt-2" @click="downloadQrCode">
                     Download QR Code
-                  </v-btn>
-                </v-card>
+                  </AppButton>
+                </div>
               </v-col>
 
               <v-col cols="12" class="mt-4">
                 <InputLabel title="Site Location" />
-                <v-btn
-                  variant="outlined"
-                  class="mt-2"
-                  @click="isMapSearchVisible = true"
-                >
-                  <v-icon class="mr-2">mdi-map-search</v-icon>
+                <AppButton variant="ghost" icon="mdi-map-search" class="mt-2"
+                  @click="isMapSearchVisible = true">
                   Search Location
-                </v-btn>
+                </AppButton>
               </v-col>
 
               <v-col v-if="geolocation" cols="12">
@@ -125,40 +112,12 @@
             </template>
           </v-row>
         </v-form>
-      </v-card-text>
-
-      <v-toolbar class="pa-0" density="compact">
-        <v-row no-gutters>
-          <v-col cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="text"
-              class="text-none"
-              size="large"
-              @click="close"
-              height="56"
-              :disabled="submitting"
-            >
-              Cancel
-            </v-btn>
-          </v-col>
-          <v-col cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="flat"
-              color="black"
-              class="text-none font-weight-bold rounded-0"
-              height="56"
-              size="large"
-              :loading="submitting"
-              @click="onSubmit"
-            >
-              <v-icon class="mr-2">mdi-check</v-icon>
-              Update
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-toolbar>
+      </div>
+
+      <div class="attendance-settings__footer">
+        <AppButton variant="ghost" :disabled="submitting" @click="close">Cancel</AppButton>
+        <AppButton icon="mdi-check" :disabled="submitting" @click="onSubmit">Update</AppButton>
+      </div>
     </v-card>
   </v-dialog>
 
@@ -397,3 +356,43 @@ watch(showDialog, (newVal) => {
   }
 });
 </script>
+
+<style scoped>
+.attendance-settings__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: 12px;
+}
+
+.attendance-settings__body {
+  padding: 0 20px;
+}
+
+.attendance-settings__hint {
+  font-size: var(--fs-cell);
+  color: var(--text2);
+}
+
+/* Was a `variant="flat"` v-card, i.e. a second card inside the modal card. It
+   is a frame around the QR, so it takes the design's inner surface. */
+.attendance-settings__qr {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  background: var(--thead);
+}
+
+/* The design's dialog footer. Deliberately not the shared
+   `.screen-modal__footer` - that class is on the batch-D branch (#1150), not
+   on this base, and a second copy in `screens.css` would collide with it. */
+.attendance-settings__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px 20px 20px;
+}
+</style>