@7365admin1/layer-common 3.2.2-staging.118 → 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/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/ScanVisitorQRCode.vue

@@ -9,36 +9,27 @@
   >
     <v-container class="d-flex justify-center" max-height="90vh">
       <!-- QR code reader container -->
-      <v-card
-        elevation="2"
-        class="d-flex flex-column align-center pa-2 w-100 h-100"
-      >
-        <v-toolbar>
-          <v-card-title class="text-h5"> Scan QR Code </v-card-title>
-          <v-spacer />
-          <v-btn
-            color="grey-darken-1"
-            icon="mdi-close"
-            @click="closeDialog()"
-          />
-        </v-toolbar>
-
-        <div
-          id="reader"
-          class="d-flex justify-center align-center w-100 h-100"
-          style="height: calc(100vh - 64px)"
-        >
-          <!-- The QR code scanner box -->
-          <!-- This is where the QR code scanner will be displayed -->
+      <v-card class="screen-modal qr-scanner">
+        <div class="qr-scanner__head">
+          <v-card-title>Scan QR Code</v-card-title>
+          <AppButton variant="icon" icon="mdi-close" @click="closeDialog()" />
         </div>
-        <!-- Show Error Messages -->
-        <div v-if="showNotFoundMessage" class="text-error mt-4 text-h5">
-          <p>{{ errorMessage }}</p>
+
+        <div class="screen-modal__body qr-scanner__body">
+          <div id="reader" class="qr-scanner__reader">
+            <!-- The QR code scanner box -->
+            <!-- This is where the QR code scanner will be displayed -->
+          </div>
+          <!-- Show Error Messages -->
+          <p v-if="showNotFoundMessage" class="qr-scanner__error">{{ errorMessage }}</p>
+          <!-- Switch camera button inside the reader box -->
+          <AppButton
+            icon="mdi-camera-switch"
+            class="qr-scanner__switch"
+            aria-label="Switch camera"
+            @click="switchCamera()"
+          />
         </div>
-        <!-- Switch camera button inside the reader box -->
-        <v-btn color="primary" icon class="mt-4" @click="switchCamera()">
-          <v-icon icon="mdi-camera-switch" large />
-        </v-btn>
       </v-card>
     </v-container>
   </v-dialog>
@@ -225,3 +216,48 @@ const stopScanner = () => {
   });
 };
 </script>
+
+<style scoped>
+/* Same scanner frame as the pass-key scanner: the card used to be `w-100`
+   inside the centring container, so keep that width. */
+.qr-scanner {
+  width: 100%;
+}
+
+.qr-scanner__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: 12px;
+}
+
+.qr-scanner__body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 4px 20px 20px;
+}
+
+.qr-scanner__reader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 320px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  background: var(--thead);
+}
+
+.qr-scanner__error {
+  margin: 0;
+  font-size: var(--fs-cell);
+  color: var(--err);
+}
+
+.qr-scanner__switch {
+  width: var(--btn-h);
+  padding: 0;
+}
+</style>

package/components/SearchVehicleNumberUser.vue

@@ -1,44 +1,35 @@
 <template>
-  <v-card width="100%">
-    <v-toolbar>
-      <v-row no-gutters>
-        <v-col cols="12" class="text-h6 font-weight-bold px-3">Vehicle Number ({{ vehicleNumber }})</v-col>
-      </v-row>
-    </v-toolbar>
+  <v-card width="100%" class="screen-modal search-vehicle-user">
+    <v-card-title>Vehicle Number ({{ vehicleNumber }})</v-card-title>
 
-    <v-card-text style="max-height: 100vh; overflow-y: auto">
-      <v-data-table :items="prop.vehicleNumberUsersList" hide-default-footer :headers="headers" density="comfortable" 
-        item-key="_id ">
-        <template #item.name="{ item }">
-          <span class="d-flex align-center ga-2">
-            <span>
-              <AvatarMain :name="item?.name" :size="20" :id="item?._id" />
+    <div class="screen-modal__body search-vehicle-user__body">
+      <!-- `table-card` is the shared table card's own class, so the header
+           type, the cell padding and the row rule are the design's - without
+           TableMain's page toolbar, which a two-row picker inside a dialog
+           has nothing to put in. -->
+      <AppCard class="table-card">
+        <v-data-table :items="prop.vehicleNumberUsersList" hide-default-footer :headers="headers" density="comfortable"
+          item-key="_id ">
+          <template #item.name="{ item }">
+            <span class="d-flex align-center ga-2">
+              <span>
+                <AvatarMain :name="item?.name" :size="20" :id="item?._id" />
+              </span>
+              <span class="text-capitalize">{{ item?.name }}</span>
             </span>
-            <span class="text-capitalize">{{ item?.name }}</span>
-          </span>
-        </template>
+          </template>
 
-        <template #item.actions="{ item }">
-          <v-btn text="Select" rounded="md" flat color="blue" density="comfortable" :ripple="false" @click="handleSelectUser(item)" />
-        </template>
-      </v-data-table>
-    </v-card-text>
+          <template #item.actions="{ item }">
+            <AppButton variant="ghost" @click="handleSelectUser(item)">Select</AppButton>
+          </template>
+        </v-data-table>
+      </AppCard>
+    </div>
 
-    <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="emit('close')" height="48">
-            Close
-          </v-btn>
-        </v-col>
-
-        <v-col cols="6" class="pa-0">
-          <v-btn block variant="flat" color="black" class="text-none" height="48" tile @click="emit('close')">
-            Add Different User
-          </v-btn>
-        </v-col>
-      </v-row>
-    </v-toolbar>
+    <div class="search-vehicle-user__footer">
+      <AppButton variant="ghost" @click="emit('close')">Close</AppButton>
+      <AppButton @click="emit('close')">Add Different User</AppButton>
+    </div>
     <v-dialog v-model="confirmAction" persistent max-width="450">
       <DialogReplaceAutofillPrompt  @close="confirmAction = false" @proceed="handleUpdateUserDetails"/>
     </v-dialog>
@@ -89,4 +80,15 @@ onMounted(() => {
 })
 </script>
 
-<style scoped></style>
+<style scoped>
+.search-vehicle-user__body {
+  padding: 4px 20px 0;
+}
+
+.search-vehicle-user__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px 20px 20px;
+}
+</style>

package/components/VehicleAddSelection.vue

@@ -1,36 +1,24 @@
 <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 text-capitalize">
-          Add Vehicle
-        </span>
-      </v-row>
-    </v-toolbar>
-
-    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-5">
-      <span class="text-subtitle-2 w-100 font-weight-medium d-flex justify-center mb-3">Please Select Status</span>
-      <template v-for="item in selection" :key="item.value">
-        <v-btn color="primary-button" block variant="flat" rounded="md" size="48" :text="item.label" @click="select(item.value)" class="my-2 text-capitalize text-subtitle-2" />
-      </template>
-    </v-card-text>
-
-    <v-toolbar density="compact">
-      <v-row no-gutters>
-        <v-col cols="12">
-          <v-btn
-            tile
-            block
-            variant="text"
-            class="text-none"
-            size="48"
-            @click="cancel"
-          >
-            Cancel
-          </v-btn>
-        </v-col>
-      </v-row>
-    </v-toolbar>
+  <v-card width="100%" class="screen-modal vehicle-add">
+    <v-card-title>Add Vehicle</v-card-title>
+
+    <div class="screen-modal__body vehicle-add__body">
+      <p class="vehicle-add__hint">Please Select Status</p>
+      <AppButton
+        v-for="item in selection"
+        :key="item.value"
+        class="vehicle-add__option"
+        @click="select(item.value)"
+      >
+        {{ item.label }}
+      </AppButton>
+    </div>
+
+    <div class="vehicle-add__footer">
+      <AppButton variant="ghost" class="vehicle-add__cancel" @click="cancel">
+        Cancel
+      </AppButton>
+    </div>
   </v-card>
 </template>
 
@@ -56,3 +44,31 @@ function select(value: TVehicleType | 'seasonpass') {
   emit("select", value);
 }
 </script>
+
+<style scoped>
+/* The three choices are full-width by the screen's own design, so the only
+   thing said here is the width and the stack - the button itself is AppButton. */
+.vehicle-add__body {
+  padding: 20px;
+}
+
+.vehicle-add__hint {
+  margin: 0 0 14px;
+  text-align: center;
+  font-size: var(--fs-cell);
+  color: var(--muted);
+}
+
+.vehicle-add__option {
+  display: flex;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.vehicle-add__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 0 20px 20px;
+}
+</style>