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

package/components/VehicleForm.vue

@@ -1,24 +1,19 @@
 <template>
-  <v-card width="100%" :loading="processing">
-    <v-toolbar>
-      <v-row
-        no-gutters
-        class="fill-height px-6 d-flex ga-2 justify-space-between"
-        align="center"
-      >
-        <span class="font-weight-bold text-h5 text-capitalize">
-          {{ prop.mode }} Vehicle <span>({{ formatVehicleType(type) }})</span>
-        </span>
-        <span>
-          <ButtonClose @click="emit('close:all')" icon-only />
-        </span>
-      </v-row>
-    </v-toolbar>
-
-    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-3">
-      <span class="text-subtitle-1 w-100 font-weight-bold mb-3"
-        >General Information</span
-      >
+  <v-card width="100%" class="screen-modal vehicle-form" :loading="processing">
+    <div class="vehicle-form__head">
+      <v-card-title class="text-capitalize">
+        {{ prop.mode }} Vehicle ({{ formatVehicleType(type) }})
+      </v-card-title>
+      <AppButton
+        variant="icon"
+        icon="mdi-close"
+        aria-label="Close"
+        @click="emit('close:all')"
+      />
+    </div>
+
+    <div class="screen-modal__body vehicle-form__body filter-field">
+      <span class="vehicle-form__section">General Information</span>
       <v-form
         ref="formRef"
         v-model="validForm"
@@ -209,24 +204,20 @@
                     :cols="newPlateNumbers.length > 1 ? '1' : '0'"
                     class="d-flex align-start"
                   >
-                    <v-btn
-                      icon="mdi-delete-outline"
-                      variant="text"
-                      color="error"
+                    <AppButton
                       v-if="newPlateNumbers.length > 1"
+                      variant="icon"
+                      icon="mdi-delete-outline"
+                      class="vehicle-form__remove"
+                      :aria-label="`Remove plate ${index + 1}`"
                       @click="removePlate(index)"
                     />
                   </v-col>
                 </v-row>
 
-                <v-btn
-                  prepend-icon="mdi-plus"
-                  variant="outlined"
-                  class="text-none"
-                  @click="addPlate"
-                >
+                <AppButton variant="ghost" icon="mdi-plus" @click="addPlate">
                   Add Plate
-                </v-btn>
+                </AppButton>
               </template>
             </template>
 
@@ -300,21 +291,19 @@
 
             <v-col cols="12" :class="[showSubscriptionDateOptions && 'mt-5']">
               <v-row justify="center">
-                <v-col cols="6">
-                  <v-btn
-                    block
-                    color="primary"
-                    variant="text"
-                    class="text-none font-weight-bold"
-                    :text="
-                      showSubscriptionDateOptions
-                        ? 'Hide Subscription Options'
-                        : 'Show Subscription Options'
-                    "
+                <v-col cols="6" class="d-flex justify-center">
+                  <AppButton
+                    variant="ghost"
                     @click="
                       showSubscriptionDateOptions = !showSubscriptionDateOptions
                     "
-                  ></v-btn>
+                  >
+                    {{
+                      showSubscriptionDateOptions
+                        ? "Hide Subscription Options"
+                        : "Show Subscription Options"
+                    }}
+                  </AppButton>
                 </v-col>
               </v-row>
             </v-col>
@@ -323,82 +312,41 @@
           <v-col cols="12">
             <v-row no-gutters>
               <v-col cols="12" class="text-center">
-                <span
-                  class="text-none text-subtitle-2 font-weight-medium text-error"
-                >
-                  {{ message }}
-                </span>
+                <span class="vehicle-form__error">{{ message }}</span>
               </v-col>
             </v-row>
           </v-col>
         </v-row>
       </v-form>
-    </v-card-text>
-    <v-row no-gutters class="w-100" v-if="errorMessage">
-      <p class="text-error w-100 text-center text-subtitle-2">
-        {{ errorMessage }}
-      </p>
-    </v-row>
-    <v-toolbar density="compact">
-      <v-row no-gutters>
-        <v-col cols="6">
-          <v-btn
-            v-if="prop.mode === 'add'"
-            tile
-            block
-            variant="text"
-            class="text-none"
-            size="48"
-            @click="back"
-            text="Back to Selection"
-          />
-          <v-btn
-            v-else
-            tile
-            block
-            variant="text"
-            class="text-none"
-            size="48"
-            @click="close"
-            text="Close"
-          />
-        </v-col>
-        <v-col cols="6">
-          <v-btn
-            tile
-            block
-            variant="flat"
-            color="black"
-            class="text-none"
-            size="48"
-            :disabled="!validForm || processing"
-            @click="submit"
-            :text="prop.mode == 'add' ? 'Submit' : 'Update'"
-          />
-        </v-col>
-      </v-row>
-    </v-toolbar>
+    </div>
+    <p v-if="errorMessage" class="vehicle-form__error vehicle-form__error--block">
+      {{ errorMessage }}
+    </p>
+    <div class="vehicle-form__footer">
+      <AppButton v-if="prop.mode === 'add'" variant="ghost" @click="back">
+        Back to Selection
+      </AppButton>
+      <AppButton v-else variant="ghost" @click="close">Close</AppButton>
+      <AppButton :disabled="!validForm || processing" @click="submit">
+        {{ prop.mode == "add" ? "Submit" : "Update" }}
+      </AppButton>
+    </div>
 
     <v-dialog v-model="showMatchingPeopleDialog" max-width="700" persistent>
-      <v-card :loading="checkingUnit">
-        <v-toolbar>
-          <v-toolbar-title>
-            <v-row no-gutters class="d-flex align-center justify-space-between">
-              <span class="font-weight-bold">
-                Matching Records for "{{ searchUnitName ?? "-" }}"
-              </span>
-              <span>
-                <v-btn
-                  icon="mdi-close"
-                  variant="text"
-                  @click="handleCloseMatchDialog"
-                />
-              </span>
-            </v-row>
-          </v-toolbar-title>
-        </v-toolbar>
+      <v-card class="screen-modal vehicle-match" :loading="checkingUnit">
+        <div class="vehicle-form__head">
+          <v-card-title>
+            Matching Records for "{{ searchUnitName ?? "-" }}"
+          </v-card-title>
+          <AppButton
+            variant="icon"
+            icon="mdi-close"
+            aria-label="Close"
+            @click="handleCloseMatchDialog"
+          />
+        </div>
 
-        <v-card-text max-height="400" style="overflow-y: auto">
+        <div class="screen-modal__body vehicle-match__body">
           <v-list lines="three">
             <v-list-item
               v-if="matchingPeople.length > 0 || checkingUnit"
@@ -414,24 +362,19 @@
                 NRIC: {{ v.nric || "-" }}
               </v-list-item-subtitle>
 
-              <div class="mt-1">
-                <v-chip
+              <div class="mt-1 d-flex flex-wrap ga-1">
+                <StatusChip
                   v-for="p in v.plates"
                   :key="p?.plateNumber"
-                  size="small"
-                  class="mr-1"
+                  tone="neutral"
+                  :dot="false"
                 >
                   {{ p?.plateNumber }}
-                </v-chip>
+                </StatusChip>
               </div>
 
               <template #append>
-                <v-btn
-                  variant="flat"
-                  color="primary"
-                  @click="selectPeopleRecord(v)"
-                  >Select</v-btn
-                >
+                <AppButton @click="selectPeopleRecord(v)">Select</AppButton>
               </template>
             </v-list-item>
             <v-empty-state
@@ -441,16 +384,13 @@
               subtitle="The NRIC you entered does not match any existing records."
             >
               <template #actions>
-                <v-btn
-                  variant="flat"
-                  color="primary"
-                  @click="showMatchingPeopleDialog = false"
-                  >Close</v-btn
-                >
+                <AppButton @click="showMatchingPeopleDialog = false">
+                  Close
+                </AppButton>
               </template>
             </v-empty-state>
           </v-list>
-        </v-card-text>
+        </div>
       </v-card>
     </v-dialog>
   </v-card>
@@ -1123,4 +1063,47 @@ onMounted(() => {
 .class-readonly {
   pointer-events: none;
 }
+
+.vehicle-form__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: 12px;
+}
+
+.vehicle-form__body,
+.vehicle-match__body {
+  padding: 4px 20px 0;
+}
+
+.vehicle-form__section {
+  display: block;
+  margin-bottom: 4px;
+  font-size: var(--fs-cell);
+  font-weight: 800;
+  color: var(--text);
+}
+
+.vehicle-form__remove {
+  color: var(--err);
+}
+
+.vehicle-form__error {
+  font-size: var(--fs-cell);
+  font-weight: 500;
+  color: var(--err);
+}
+
+.vehicle-form__error--block {
+  width: 100%;
+  margin: 0;
+  text-align: center;
+}
+
+.vehicle-form__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px 20px 20px;
+}
 </style>

package/components/VehicleManagement.vue

@@ -1,17 +1,28 @@
 <template>
   <v-row no-gutters>
+    <!--
+      The design's title row: page name left, primary action right. Was a
+      `tonal` pill drawn by `TableMain` on its own row under the (absent)
+      heading. Same handler, same permission gate.
+    -->
+    <v-col cols="12">
+      <PageHeader title="Vehicle Mgmt">
+        <template #actions>
+          <AppButton v-if="canCreateVehicle" icon="mdi-plus" @click="handleAddVehicleClick">
+            Add Vehicle
+          </AppButton>
+        </template>
+      </PageHeader>
+    </v-col>
+
     <TableMain :headers="headers" :items="items" :loading="loading || getVehiclesPending" :page="page" :pages="pages"
-      :pageRange="pageRange" :extension-height="70" :canCreate="canCreateVehicle" @refresh="getVehiclesRefresh"
-      createLabel="Add Vehicle" show-header @row-click="handleRowClick" @create="handleAddVehicleClick"
+      :pageRange="pageRange" @refresh="getVehiclesRefresh"
+      show-header @row-click="handleRowClick"
       @update:page="handleUpdatePage">
 
-      <template #extension>
-        <v-row no-gutters class="px-5 py-1 d-flex align-center justify-end ga-3">
-          <v-text-field v-model="searchInput" density="compact" placeholder="Search" clearable max-width="300"
-            append-inner-icon="mdi-magnify" hide-details />
-          <!-- <v-select v-model="vehicleTypeFilter" density="compact" item-title="label" item-value="value"
-            placeholder="Filter by Type" clearable max-width="200" hide-details :items="typeOptions" /> -->
-        </v-row>
+      <!-- Search joins the toolbar row rather than stacking a second one. -->
+      <template #prepend-additional>
+        <AppField v-model="searchInput" search compact placeholder="Search" klass="app-toolbar__search" />
       </template>
 
       <template #item.block="{ value }">
@@ -70,7 +81,10 @@
                 <span class="d-flex ga-3 align-center"><strong>{{ label }}:</strong></span>
                 <!-- <PlateNumberDisplay :plate-numbers="selectedVehicleObject[key]" show-all :default-value="selectedVehicleObject.plateNumber" />   -->
                 <v-col cols="12">
-                  <v-card flat outlined class="pa-2" border="sm black" :loading="loadingPlateNumberDetails">
+                  <!-- `border="sm black"` pinned a hard black edge on BOTH themes. Dropping only
+                       the colour word keeps the width and lets the edge fall back to
+                       `--v-border-color`, which is the design's `--border` in each theme. -->
+                  <v-card flat outlined class="pa-2" border="sm" :loading="loadingPlateNumberDetails">
                     <v-data-table :items="selectedVehicleObject[key]" :headers="plateHeaders" hide-default-footer>
                       <template #item.status="{ value }">
                         <v-chip :color="formatVehicleStatus(value).color" size="x-small" dark>
@@ -91,13 +105,13 @@
                               title="Approve" prepend-icon="mdi-check-circle" base-color="success"
                               @click="handleApproveVehicle(plateNumberItem as TPlateNumber)" />
                             <v-list-item v-if="(plateNumberItem as TPlateNumber)?.status == 'deleted'" title="Restore"
-                              prepend-icon="mdi-restore" base-color="orange"
+                              prepend-icon="mdi-restore" base-color="warning"
                               @click="handleRestoreVehicle(plateNumberItem as TPlateNumber)" />
                             <v-list-item
                               v-if="((plateNumberItem as TPlateNumber)?.type === 'whitelist' || (plateNumberItem as TPlateNumber)?.type === 'blocklist') && plateNumberItem?.status == 'active'"
                               :title="(plateNumberItem as TPlateNumber)?.type === 'blocklist' ? 'Whitelist' : 'Blocklist'"
                               prepend-icon="mdi-swap-horizontal"
-                              :base-color="(plateNumberItem as TPlateNumber)?.type === 'blocklist' ? 'primary' : 'red'"
+                              :base-color="(plateNumberItem as TPlateNumber)?.type === 'blocklist' ? 'primary' : 'error'"
                               @click="handleUpdateType(plateNumberItem as TPlateNumber)" />
 
                             <v-list-item

package/components/VehicleUpdateMoreAction.vue

@@ -1,55 +1,37 @@
 <template>
-  <v-card width="100%">
-    <v-toolbar>
-      <template v-if="$slots.header">
-        <slot name="header" :title="title" :onClose="onClose" />
-      </template>
-      <template v-else>
-        <v-row no-gutters class="fill-height px-6" align="center">
-          <span class="font-weight-bold text-h5 text-capitalize">{{
-            title
-            }}</span>
-        </v-row>
-      </template>
-    </v-toolbar>
+  <v-card width="100%" class="screen-modal more-action">
+    <template v-if="$slots.header">
+      <slot name="header" :title="title" :onClose="onClose" />
+    </template>
+    <v-card-title v-else class="text-capitalize">{{ title }}</v-card-title>
 
-    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0">
+    <div class="screen-modal__body more-action__body">
       <slot name="content" />
-    </v-card-text>
+    </div>
 
-    <v-toolbar class="pa-0" density="compact">
-      <v-row no-gutters>
-        <v-col :cols="canDelete || canUpdate ? 6 : 12" class="pa-0">
-          <v-btn block variant="text" class="text-none" size="large" @click="emit('close')" height="48">
-            Close
-          </v-btn>
-        </v-col>
+    <div class="more-action__footer">
+      <AppButton variant="ghost" @click="emit('close')">Close</AppButton>
 
-        <v-col cols="6" class="pa-0" v-if="canDelete || canUpdate">
-          <v-menu>
-            <template #activator="{ props }">
-              <v-btn block variant="flat" color="black" class="text-none" height="48" v-bind="props" tile>
-                More actions
-              </v-btn>
-            </template>
+      <v-menu v-if="canDelete || canUpdate">
+        <template #activator="{ props }">
+          <AppButton v-bind="props">More actions</AppButton>
+        </template>
 
-            <v-list class="pa-0">
-              <v-list-item v-if="canUpdate" @click="emit('edit')">
-                <v-list-item-title class="text-subtitle-2">
-                  {{ editButtonLabel }}
-                </v-list-item-title>
-              </v-list-item>
+        <v-list class="more-action__menu">
+          <v-list-item v-if="canUpdate" @click="emit('edit')">
+            <v-list-item-title class="more-action__item">
+              {{ editButtonLabel }}
+            </v-list-item-title>
+          </v-list-item>
 
-              <v-list-item v-if="canDelete" @click="emit('delete')" class="text-red">
-                <v-list-item-title class="text-subtitle-2">
-                  {{ deleteButtonLabel }}
-                </v-list-item-title>
-              </v-list-item>
-            </v-list>
-          </v-menu>
-        </v-col>
-      </v-row>
-    </v-toolbar>
+          <v-list-item v-if="canDelete" @click="emit('delete')">
+            <v-list-item-title class="more-action__item more-action__item--danger">
+              {{ deleteButtonLabel }}
+            </v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+    </div>
   </v-card>
 </template>
 
@@ -81,4 +63,35 @@ const emit = defineEmits(["close", "edit", "delete"]);
 const { canUpdate, editButtonLabel, deleteButtonLabel, title } = prop;
 </script>
 
-<style scoped></style>
+<style scoped>
+.more-action__body {
+  padding: 4px 20px;
+}
+
+.more-action__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px 20px 20px;
+}
+
+/* The dropdown is teleported out of the card, so it needs the card's own
+   surface and rule said again rather than inheriting Vuetify's grey sheet. */
+.more-action__menu {
+  padding: 4px 0;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+}
+
+.more-action__item {
+  font-size: var(--fs-cell);
+  font-weight: var(--fw-btn);
+  color: var(--text);
+}
+
+/* The delete row was Vuetify's `text-red`; same meaning, on the token. */
+.more-action__item--danger {
+  color: var(--err);
+}
+</style>