@7365admin1/layer-common 3.2.2-staging.118 → 3.2.2-staging.121

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/Nfc/NFCTagForm.vue

@@ -64,6 +64,10 @@
         </v-col>
 
         <v-col cols="6" class="pa-0">
+          <!-- Was `color="black"`: a fixed slab that stayed black on the dark
+               card. `primary-button` is the theme's FILL token, and its pair
+               `on-primary-button` supplies the white label - unlike `primary`,
+               which is a FOREGROUND here (links, icons, text buttons). -->
           <v-btn
             block
             tile
@@ -71,7 +75,7 @@
             class="text-none"
             size="large"
             height="48"
-            color="black"
+            color="primary-button"
             @click="submit"
             :loading="loading"
             :disabled="!valid || loading || !hasChanges"

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

@@ -155,8 +155,14 @@
         </div>
 
         <!-- Data Table -->
+        <!--
+          `tableHeaders`, not `headers`, and the two are the SAME ARRAY unless a
+          caller has opted into fixed proportions by putting `weight` on a
+          column. See `columnsAreWeighted` below.
+        -->
         <v-data-table
-          :headers="headers"
+          :class="columnsAreWeighted ? 'table-card__fixed' : undefined"
+          :headers="tableHeaders"
           :items="items"
           :item-value="itemValue"
           :items-per-page="itemsPerPage"
@@ -257,6 +263,49 @@ const props = defineProps({
   },
 });
 
+/**
+ * THE DESIGN'S FIXED COLUMN PROPORTIONS, AND WHY THEY ARE OPT-IN.
+ *
+ * Every table in the prototype is a CSS grid with an explicit, per-table
+ * `grid-template-columns` - `0.9fr 1.5fr 1.7fr 0.8fr 1fr 1.1fr` on Feedbacks,
+ * `2fr 1fr 1fr` on Units, `1.6fr 1fr 1.3fr 1.6fr 48px` on Pass & Key. Those
+ * ratios are a per-screen design decision. Nothing in a caller's `headers`
+ * array carries that information, so this shared component cannot derive them,
+ * and inventing one set of proportions for 21 components and 18 app pages would
+ * be worse than the automatic layout they have now.
+ *
+ * So it is stated, not guessed: a header may carry `weight: 1.5` and this turns
+ * the weights into percentage widths and switches the table to
+ * `table-layout: fixed`, which is what makes a width binding rather than a hint.
+ * A column with NO weight is left exactly as the caller wrote it, so an
+ * existing `width` (an action column pinned at 48px, say) survives untouched
+ * and only the weighted columns share out what is left.
+ *
+ * NO caller changes. With no weights anywhere, `tableHeaders` IS `props.headers`
+ * - the same array reference - and the table renders exactly what it renders
+ * today, automatic widths and all.
+ */
+const columnsAreWeighted = computed(() =>
+  props.headers.some((h) => Number(h?.weight) > 0)
+);
+
+const tableHeaders = computed(() => {
+  if (!columnsAreWeighted.value) return props.headers;
+
+  // Columns with no weight keep whatever width they already had (often none,
+  // e.g. a 48px action column), and only the weighted ones share what is left.
+  const total = props.headers.reduce(
+    (sum, h) => sum + (Number(h?.weight) > 0 ? Number(h.weight) : 0),
+    0
+  );
+
+  return props.headers.map((h) =>
+    Number(h?.weight) > 0
+      ? { ...h, width: `${((Number(h.weight) / total) * 100).toFixed(4)}%` }
+      : h
+  );
+});
+
 const emits = defineEmits([
   "create",
   "scan",

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>