@7365admin1/layer-common 3.2.2-staging.116 → 3.2.2-staging.120

package/components/AddPassKeyToVisitor.vue

@@ -1,24 +1,21 @@
 <template>
-  <v-card width="100%" :loading="processing">
-    <v-toolbar>
-      <v-row
-        no-gutters
-        class="fill-height px-6 d-flex justify-space-between align-center"
-        align="center"
-      >
-        <span class="font-weight-bold text-subtitle-1"
-          >{{ isEditMode ? "Edit" : "Assign" }} Pass &amp; Keys</span
-        >
-        <ButtonClose @click="emit('close')" />
-      </v-row>
-    </v-toolbar>
-
-    <v-card-text>
-      <v-row no-gutters class="ga-1">
+  <v-card width="100%" class="screen-modal passkey" :loading="processing">
+    <div class="passkey__head">
+      <v-card-title>{{ isEditMode ? "Edit" : "Assign" }} Pass &amp; Keys</v-card-title>
+      <AppButton
+        variant="icon"
+        icon="mdi-close"
+        aria-label="Close"
+        @click="emit('close')"
+      />
+    </div>
+
+    <div class="screen-modal__body passkey__body">
+      <!-- `.filter-field` is the design's input, and it is a descendant
+           selector, so both autocompletes get it from this one class. -->
+      <v-row no-gutters class="ga-1 filter-field">
         <v-col cols="12">
-          <span class="text-subtitle-2 text-medium-emphasis">
-            Name: {{ prop.visitor.name }}
-          </span>
+          <span class="passkey__name">Name: {{ prop.visitor.name }}</span>
         </v-col>
 
         <!-- Pass section -->
@@ -27,15 +24,11 @@
 
           <!-- Existing pass -->
           <div v-if="existingPass" class="d-flex align-center ga-2 mb-2">
-            <v-chip
-              prepend-icon="mdi-card-bulleted-outline"
-              color="blue"
-              variant="tonal"
-              size="small"
-            >
+            <StatusChip tone="info" :dot="false">
+              <v-icon icon="mdi-card-bulleted-outline" size="13" />
               {{ existingPass.prefixAndName }}
-            </v-chip>
-            <span class="text-caption text-medium-emphasis">(current)</span>
+            </StatusChip>
+            <span class="passkey__current">(current)</span>
           </div>
 
           <!-- New pass selector -->
@@ -79,21 +72,26 @@
             v-if="existingKeys.length > 0"
             class="d-flex flex-wrap ga-1 mb-2"
           >
-            <v-chip
+            <!-- The design's tag chip, keeping the remove control the product
+                 already had: the tone and the shape are the shared ones, only
+                 the close button is drawn inside rather than by Vuetify. -->
+            <StatusChip
               v-for="key in existingKeys.filter((k) => k.status != 'Removed')"
               :key="key.keyId"
-              prepend-icon="mdi-key"
-              color="orange"
-              variant="tonal"
-              size="small"
-              closable
-              @click:close="removeExistingKey(key)"
+              tone="warn"
+              :dot="false"
             >
+              <v-icon icon="mdi-key" size="13" />
               {{ key.prefixAndName }}
-            </v-chip>
-            <span class="text-caption text-medium-emphasis align-self-center">
-              (current)
-            </span>
+              <button
+                class="passkey__remove"
+                :aria-label="`Remove ${key.prefixAndName}`"
+                @click="removeExistingKey(key)"
+              >
+                <v-icon icon="mdi-close-circle" size="14" />
+              </button>
+            </StatusChip>
+            <span class="passkey__current align-self-center">(current)</span>
           </div>
 
           <!-- New keys selector -->
@@ -132,41 +130,16 @@
       </v-row>
 
       <v-row v-if="errorMessage" no-gutters class="mt-2">
-        <p class="text-error text-subtitle-2 w-100 text-center">
-          {{ errorMessage }}
-        </p>
-      </v-row>
-    </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"
-            text="Cancel"
-            @click="emit('close')"
-          />
-        </v-col>
-        <v-col cols="6">
-          <v-btn
-            tile
-            block
-            variant="flat"
-            color="black"
-            class="text-none"
-            size="48"
-            :text="isEditMode ? 'Save' : 'Assign'"
-            :disabled="!canSubmit"
-            :loading="processing"
-            @click="handleSubmit"
-          />
-        </v-col>
+        <p class="passkey__error">{{ errorMessage }}</p>
       </v-row>
-    </v-toolbar>
+    </div>
+
+    <div class="passkey__footer">
+      <AppButton variant="ghost" @click="emit('close')">Cancel</AppButton>
+      <AppButton :disabled="!canSubmit" @click="handleSubmit">
+        {{ isEditMode ? "Save" : "Assign" }}
+      </AppButton>
+    </div>
   </v-card>
 </template>
 
@@ -448,4 +421,53 @@ async function handleSubmit() {
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+.passkey__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: 12px;
+}
+
+.passkey__body {
+  padding: 4px 20px 0;
+}
+
+.passkey__name,
+.passkey__current {
+  font-size: var(--fs-cell);
+  color: var(--text2);
+}
+
+.passkey__error {
+  width: 100%;
+  margin: 0;
+  text-align: center;
+  font-size: var(--fs-cell);
+  color: var(--err);
+}
+
+/* The chip's own remove control - `currentColor`, so it stays on whatever
+   tone the chip carries rather than picking a second colour. */
+.passkey__remove {
+  display: inline-flex;
+  margin-left: 2px;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.75;
+}
+
+.passkey__remove:hover {
+  opacity: 1;
+}
+
+.passkey__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px 20px 20px;
+}
+</style>

package/components/BulletinBoardView.vue

@@ -1,14 +1,17 @@
 <template>
-  <v-card width="100%" :loading="processing">
+  <v-card width="100%" class="screen-modal" :loading="processing">
     <v-toolbar>
       <v-row no-gutters class="fill-height px-6" align="center">
-        <span class="font-weight-bold text-subtitle-1 text-capitalize">
+        <span class="screen-card-title text-capitalize">
           Preview Announcement
         </span>
       </v-row>
     </v-toolbar>
 
-    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0 my-3">
+    <v-card-text
+      style="max-height: 100vh; overflow-y: auto"
+      class="screen-modal__body pb-0 my-3"
+    >
       <v-row no-gutters>
         <template v-for="(label, key) in formattedFields" :key="key">
           <v-col cols="12" class="mb-5">
@@ -39,7 +42,7 @@
             <v-col class="font-weight-bold">Attachments:</v-col>
             <v-col cols="9" class="px-10">
               <template v-if="videosArray.length > 0">
-                <div class="text-caption text-medium-emphasis mb-1">
+                <div class="text-caption screen-hint mb-1">
                   Videos ({{ videosArray.length }})
                 </div>
                 <v-list density="compact" class="pa-0 rounded-lg border mb-3">
@@ -71,7 +74,7 @@
 
               <template v-if="photosArray.length > 0">
                 <div
-                  class="text-caption text-medium-emphasis mb-1"
+                  class="text-caption screen-hint mb-1"
                   :class="{ 'mt-3': videosArray.length > 0 }"
                 >
                   Photos ({{ photosArray.length }})
@@ -110,7 +113,7 @@
 
               <template v-if="filesArray.length > 0">
                 <div
-                  class="text-caption text-medium-emphasis mb-1"
+                  class="text-caption screen-hint mb-1"
                   :class="{
                     'mt-3': videosArray.length > 0 || photosArray.length > 0,
                   }"

package/components/CameraMain.vue

@@ -1,57 +1,45 @@
 <template>
   <v-row no-gutters>
     <v-col cols="12">
-      <v-card width="100%" variant="outlined" border="thin" rounded="lg">
-        <v-toolbar density="compact" color="grey-lighten-4 pl-2 pr-4">
-          <template #prepend>
-            <v-btn fab icon density="comfortable" @click="getCameraRefresh()">
-              <v-icon>mdi-refresh</v-icon>
-            </v-btn>
-          </template>
-
-          <template #append>
-            <v-btn
-              v-if="!prop.readOnly"
-              variant="flat"
-              color="primary"
-              class="text-none"
-              @click="dialogAdd = true"
-            >
+      <!-- Two `grey-lighten-4` bars - one above the table, one below - are one
+           CardToolbar on the card's own surface. The literal grey stayed white
+           on the dark theme's card; measured as four 48px white slabs. -->
+      <AppCard class="table-card">
+        <CardToolbar :count="pageRange">
+          <template #left>
+            <AppButton
+              variant="icon"
+              icon="mdi-refresh"
+              aria-label="Refresh"
+              @click="getCameraRefresh()"
+            />
+            <AppButton v-if="!prop.readOnly" @click="dialogAdd = true">
               Add
-            </v-btn>
+            </AppButton>
           </template>
-        </v-toolbar>
-
-        <v-card-text class="pa-0 bg-red">
-          <v-data-table
-            :headers="computedHeaders"
-            :items="items"
-            fixed-header
-            hide-default-footer
-            @click:row="handleRowClick"
-            style="max-height: 300px"
-          >
-            <template #item.host="{ value }">
-              {{ maskHostUrl(value) }}
-            </template>
-          </v-data-table>
-        </v-card-text>
 
-        <v-toolbar density="compact" color="grey-lighten-4">
-          <template #append>
-            <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 text-caption text-font gray">
-                {{ pageRange }}
-              </span>
-              <local-pagination
-                v-model="page"
-                :length="pages"
-                @update:value="$emit('update:value', $event)"
-              />
-            </v-row>
+          <template #right>
+            <local-pagination
+              v-model="page"
+              :length="pages"
+              @update:value="$emit('update:value', $event)"
+            />
           </template>
-        </v-toolbar>
-      </v-card>
+        </CardToolbar>
+
+        <v-data-table
+          :headers="computedHeaders"
+          :items="items"
+          fixed-header
+          hide-default-footer
+          @click:row="handleRowClick"
+          style="max-height: 300px"
+        >
+          <template #item.host="{ value }">
+            {{ maskHostUrl(value) }}
+          </template>
+        </v-data-table>
+      </AppCard>
     </v-col>
 
     <!-- dialog -->

package/components/DeliveryCompany.vue

@@ -1,22 +1,27 @@
 <template>
     <v-row no-gutters class="pa-3">
         <v-col cols="12">
-            <v-card width="100%" variant="outlined" border="thin" rounded="lg" max-width="700" max-height="500"
-                style="overflow-y: auto;">
-                <v-toolbar density="compact" color="grey-lighten-4 pl-2 pr-4">
-                    <v-row v-if="!hideTitle" no-gutters class="px-3 font-weight-bold">
-                        Delivery Companies
-                    </v-row>
+            <AppCard class="delivery-company__card">
+                <!--
+                  The one toolbar the design puts on top of the card. It was a
+                  hardcoded grey-lighten-4 bar, which stays light in dark mode
+                  and painted as a white slab there.
+                -->
+                <CardToolbar>
+                    <template #left>
+                        <span v-if="!hideTitle" class="screen-card-title">
+                            Delivery Companies
+                        </span>
+                    </template>
 
-                    <template #append>
-                        <v-btn v-if="!props.readOnly" variant="flat" color="primary" class="text-none"
-                            @click="handleAdd">
+                    <template #right>
+                        <AppButton v-if="!props.readOnly" @click="handleAdd">
                             Add
-                        </v-btn>
+                        </AppButton>
                     </template>
-                </v-toolbar>
+                </CardToolbar>
 
-                <v-card-text class="pa-0" style="min-height: 100px;">
+                <div class="pa-0" style="min-height: 100px;">
                     <template v-if="companies.length > 0">
                         <draggable :list="companies" item-key="index" class="drag-area"
                             :disabled="editingIndex !== null">
@@ -60,11 +65,11 @@
                         </draggable>
                     </template>
 
-                    <div v-else class="text-center py-5">
+                    <div v-else class="screen-empty text-center py-5">
                         No delivery companies added yet.
                     </div>
-                </v-card-text>
-            </v-card>
+                </div>
+            </AppCard>
         </v-col>
 
         <v-dialog v-model="dialog.add" persistent width="450">
@@ -82,12 +87,13 @@
                 </v-card-text>
 
                 <v-toolbar>
-                    <v-row no-gutters justify="end" align="center" class="px-5">
-                        <v-btn variant="text" text="Cancel" @click="dialog.add = false" />
-                        <v-btn variant="flat" color="primary" class="text-none ml-2"
-                            @click="saveEdit(companies.length)">
+                    <v-row no-gutters justify="end" align="center" class="px-5 ga-2">
+                        <AppButton variant="ghost" @click="dialog.add = false">
+                            Cancel
+                        </AppButton>
+                        <AppButton @click="saveEdit(companies.length)">
                             Add
-                        </v-btn>
+                        </AppButton>
                     </v-row>
                 </v-toolbar>
             </v-card>
@@ -237,4 +243,12 @@ watch(initialCompanies, (val) => {
 .drag-handle {
     cursor: grab;
 }
+
+/* The size cap the v-card carried as max-width/max-height attributes, kept
+   verbatim so the panel does not grow to the full page width. */
+.delivery-company__card {
+    max-width: 700px;
+    max-height: 500px;
+    overflow-y: auto;
+}
 </style>

package/components/IncidentReport/Authorities.vue

@@ -2,37 +2,39 @@
   <v-row no-gutters class="px-5 pt-4">
     <!-- Authorities (Police/SCDF/Ambulance called in at the scene) -->
     <v-col cols="12" class="border-b pb-5 mb-5 mt-1">
-      <p class="mb-2" style="font-size: 17px; font-weight: 600">
+      <p class="screen-card-title mb-2">
         Authorities (Police/SCDF/Ambulance called in at the scene)?
       </p>
       <p
         v-if="authorities?.authoritiesValue == 'no'"
-        class="mt-2 text-h6 text-capitalize"
+        class="report-answer mt-2 text-capitalize"
       >
         {{ authorities?.authoritiesValue }}
       </p>
 
-      <v-data-table
-        v-else
-        :headers="authoritiesTableHeader"
-        :items="authorities?.authoritiesCalled"
-        fixed-header
-        hide-default-footer
-        :hide-default-header="false"
-        items-per-page="100"
-        style="max-height: calc(100vh - (200px))"
-        class="border mt-5"
-      >
-      </v-data-table>
+      <AppCard v-else class="table-card mt-5">
+        <v-data-table
+          :headers="authoritiesTableHeader"
+          :items="authorities?.authoritiesCalled"
+          fixed-header
+          hide-default-footer
+          :hide-default-header="false"
+          items-per-page="100"
+          style="max-height: calc(100vh - (200px))"
+        >
+        </v-data-table>
+      </AppCard>
     </v-col>
-    <div class="w-100 my-8 mx-2">
-      <v-table class="responsive-table border elevation-0">
+    <!-- `w-100` + `mx-2` made the card 16px wider than its column, so its right
+         corner was clipped off. The card supplies its own edge now. -->
+    <AppCard class="table-card w-100 my-8">
+      <v-table class="responsive-table elevation-0">
         <thead>
           <tr>
             <th
               v-for="(item, index) in concernHeader"
               :key="index"
-              class="text-left font-weight-bold text-black border-e"
+              class="text-left border-e"
             >
               {{ item }}
             </th>
@@ -196,10 +198,20 @@
           </tr>
         </tbody>
       </v-table>
-    </div>
+    </AppCard>
   </v-row>
 </template>
 
+<style scoped>
+/* The prototype states no size for a plain answer line, so it takes the body
+   row's own type rather than Vuetify's `text-h6`. */
+.report-answer {
+  font-size: var(--fs-cell);
+  font-weight: var(--fw-cell);
+  color: var(--text);
+}
+</style>
+
 <script lang="ts" setup>
 definePageMeta({
   middleware: ["01-auth", "02-org"],

package/components/MemberInformation.vue

@@ -1,9 +1,12 @@
 <template>
   <v-row no-gutters class="w-100">
-    <v-card class="w-100">
-      <v-card-text>
-        <v-btn block color="primary-button" :height="40" text="Scan QR Code" class="text-capitalize"
-          prepend-icon="mdi-qrcode" @click="handleScanQRPass" />
+    <AppCard class="w-100 pa-4">
+        <!-- GHOST, not primary: the handoff names "Scan QR Code" in its
+             ghost/secondary list, alongside Bulk Upload, Download Report and
+             Export. Stays a `v-btn` because `block` has no AppButton
+             equivalent, so the design's button is applied as a class. -->
+        <v-btn block :height="38" text="Scan QR Code" variant="outlined"
+          class="screen-btn-ghost" prepend-icon="mdi-qrcode" @click="handleScanQRPass" />
         <v-form ref="formRef" v-model="validForm" :disabled="processing" @click="errorScanPassMessage = ''">
           <v-row no-gutters class="pt-5 ga-2">
             <v-col cols="12">
@@ -81,22 +84,26 @@
 
             <v-row class="pt-3" justify="space-between">
               <v-col cols="6">
-                <v-btn text="Add Member" :disabled="!validForm" prepend-icon="mdi-plus" color="primary-button"
-                  class="text-capitalize" @click="handleAddMember" />
+                <!-- The primitive rather than a class on a v-btn: these two
+                     need nothing Vuetify owns, and AppButton is the only way
+                     they draw at the handoff's 40px / 38px. -->
+                <AppButton icon="mdi-plus" :disabled="!validForm" @click="handleAddMember">
+                  Add Member
+                </AppButton>
               </v-col>
               <v-col cols="6" align="end">
-                <v-btn text="Clear Form" prepend-icon="mdi-refresh" color="primary-button" class="text-capitalize"
-                  @click.stop="handleClearForm" />
+                <AppButton variant="ghost" icon="mdi-refresh" @click.stop="handleClearForm">
+                  Clear Form
+                </AppButton>
               </v-col>
             </v-row>
           </v-row>
         </v-form>
-      </v-card-text>
-    </v-card>
+    </AppCard>
     <visitor-pass-key-q-r-scanner :dialog="dialog.scanQRCode" v-model:scannedValue="scannedPassValue"
       @close-dialog="dialog.scanQRCode = false" />
     <v-dialog v-model="dialog.memberAutofillOptions" max-width="430">
-      <v-card v-if="memberSelectedSearchResult" class="nric-options-card">
+      <v-card v-if="memberSelectedSearchResult" class="nric-options-card screen-modal">
         <v-card-actions class="justify-end pa-1">
           <v-btn icon="mdi-close" variant="text" size="small" @click="memberCloseAutofillOptions" />
         </v-card-actions>
@@ -127,10 +134,10 @@
         </v-card-text>
 
         <v-card-actions class="justify-end px-4 pb-4">
-          <v-btn variant="text" class="text-none" size="small" @click="memberCloseAutofillOptions">
+          <v-btn variant="outlined" class="screen-btn-ghost" size="small" @click="memberCloseAutofillOptions">
             Cancel
           </v-btn>
-          <v-btn color="primary-button" variant="flat" class="text-none px-5" size="small"
+          <v-btn variant="flat" class="screen-btn-primary px-5" size="small"
             @click="memberConfirmAutofillOptions">
             Select
           </v-btn>
@@ -626,13 +633,13 @@ function handleRemoveMember(index: number) {
 }
 
 .nric-options-title {
-  color: #06253b;
+  color: var(--text);
   font-size: 1.45rem;
   line-height: 1.2;
 }
 
 .nric-options-section-title {
-  color: #06253b;
+  color: var(--text);
   font-size: 1.05rem;
   line-height: 1.25;
 }
@@ -640,7 +647,7 @@ function handleRemoveMember(index: number) {
 .nric-selected-person {
   border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
   border-radius: 12px;
-  color: #06253b;
+  color: var(--text);
   font-size: 0.95rem;
   min-height: 52px;
   padding: 10px 14px;